CSS 布局 - 水平 & 垂直对齐,全面的水平垂直居中方案：
一、水平垂直居中对齐
居中效果主要用途在于
① 元素框内的文本，图像居中，使用text-align，vertical-align，line-height等达到效果
② 布局时的div框水平垂直居中，使用margin，position等达到效果，
二、文本水平垂直居中，
1、文本水平居中
代码：
text-align：center
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
}
p {
width: 400px;
height: 50px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
我是liuxmoo！
</p>
</div>
</body>
结果展示：
p用了text-align：center，可以让文本在p元素框的水平居中位置
当然也可以在父元素中设置text-align：center，这个属性是会继承的，子元素会继承到父元素的效果。
2、文本垂直居中，
文本的垂直居中属性：vertical-align ，这个属性只能用于行内元素、表格单元格table-cell的垂直居中，
用在块级元素并没有效果。
如下代码不能垂直居中：
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
}
p {
width: 400px;
height: 50px;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p>
我是liuxmoo！
</p>
</div>
</body>结果展示：
文本没有在p元素中垂直居中，
那么如何设置垂直居中的呢？
①单行文本使用line-height=height的值来 达到垂直居中效果。
②也可以使用display将元素变为【行内元素或者是单元格】来 联合使用vertical-align 达到垂直居中
③当然还可以用padding值来修改上下填充来修改，但是这个不现实，不推荐使用！
①单行元素line-height方法垂直居中
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
}
p {
width: 400px;
height: 50px;
border: 1px solid black;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div>
<p>
我是liuxmoo！
</p>
</div>
</body>结果展示：
②可以使用display将元素变为行内元素或者是单元格来 联合使用vertical-align ，联合display达到效果
（这个办法单行多行都可以达到效果，但是会改变父元素的padding，因为这个方法为了不影响父元素的padding，还要给父元素重新设置padding值。）
代码如下：
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
}
p {
width: 400px;
height: 100px;
border: 1px solid black;
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p>
我是liuxmoo！你好呀！你好呀！你好呀！你好呀你好呀！你好呀！你好呀！你好呀！你好呀！
</p>
</div>
</body>结果展示：
三、布局时的水平垂直居中（设置块级元素框对于父元素的居中对齐），
1、块状元素水平居中，
①元素左右外边距设置为auto（根据浏览器来自适应）。
②元素定位position结合margin
③块状元素的水平居中，子元素使用display：inline-block，与父元素使用text-align：center联合（单块多块均可）
④块状元素的水平居中，子元素使用display：inline-flex，与父元素使用text-align：center联合（单块多块均可）
方法①：元素左右外边距设置为auto。
代码：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
text-align: center;
}
p {
width: 80%;
height: 100px;
border: 1px solid black;
margin: 0px auto;
}
</style>
</head>
<body>
<div>
<p>
我是内容，我是内容
</p>
</div>
</body>结果展示：
方法②元素定位position结合margin
需要给父元素设置相对定位，
代码：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
text-align: center;
position: relative;
}
p {
width: 80%;
height: 100px;
border: 1px solid black;
position: absolute;
left: 50%;
margin-left: -40%;
}
</style>
</head>
<body>
<div>
<p>
我是内容，我是内容
</p>
</div>
</body>结果：
方法③块状元素的水平居中，display：inline-block，与text-align联合
代码如下
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
text-align: center;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
<p>
我是内容2，我是内容2
</p>
</div>
</body>结果展示：
方法④块状元素的水平居中，display：flex，与text-align联合
代码如下
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
text-align: center;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
display: inline-flex;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
<p>
我是内容2，我是内容2
</p>
</div>
</body>结果展示：
2、块状元素垂直居中，
①已知高度height，使用position绝对定位，与margin：负外边距 联合
利用绝对定位，将元素的top和left属性都设为50%，再利用margin负边距（值为高的一半），将元素回拉它本身高宽的一半，
实现垂直居中。父元素需要设置position相对定位
②未知高度height，使用position绝对定位，与margin：auto 自适应外边距距 联合
利用绝对定位，将元素的四边属性，top，bottom，设置为0 , margin：auto，实现垂直居中。
父元素需要设置position相对定位
③父元素设置
方法①：
代码：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
position: relative;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body>结果展示：
方法②：
代码：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
position: relative;
}
p {
width: 40%;
height: 100px;
/* 假设我们并不知道高度，这里是为了看效果给出高度 */
border: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body>
结果展示：
四、元素水平&垂直居中！！！！！
水平垂直都居中 是 将前面 水平居中结合垂直居中方法
① 父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
子元素（需要居中的元素）设置为display：inline，或者是display：inline-block，具体根据直接需要而定，
② 父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
子元素（需要居中的元素）设置为display：inline-flex，具体根据直接需要而定，
（有兼容性问题，不兼容的浏览器还需要做前锥设置， 不使用这个办法）
② 父级容器设置为display:flex，配合text-align:center和justify-content:center即可以实现水平垂直居中。
③已知宽度高度，利用绝对定位，top，left，都设置为50% , 联合margin：负边距（各为宽高一半），实现垂直居中。
父元素需要设置position相对定位
④未知宽度高度，利用绝对定位，将元素的四边属性，top，right，bottom，left，都设置为0 , margin：auto，实现垂直居中。
父元素需要设置position相对定位
⑤未知宽度高度，利用绝对定位，top，left，都设置为50% , 联合css3中的transform：translate（-50%，-50%），实现垂直居中。
父元素需要设置position相对定位 【有兼容性问题，只是设置transform：translate（-50%，-50%）达不到效果，还需要做兼容考虑】
方法1：代码如下，结果不展示：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body>
方法2：代码如下，结果不展示：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
display: inline-flex;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body> <style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
<p>
我是内容2，我是内容2
</p>
</div>
</body>
方法3：代码如下，结果不展示：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
position: relative;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
margin-left: -20%;
margin-top: -50px;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body>
方法4：代码如下，结果不展示：
<style>
div {
width: 100%;
height: 300px;
border: 1px solid red;
position: relative;
}
p {
width: 40%;
height: 100px;
border: 1px solid black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div>
<p>
我是内容1，我是内容1
</p>
</div>
</body>
3959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
