CSS水平垂直居中实现总结
2017-08-30 本文已影响0人
xiaoguo16
在用CSS写布局的时候，经常要用到水平居中与垂直居中。首先看下面这个div：
<body>
<div>
<span>这是一个例子</span>
</div>
</body>
在body中定义了一个div，div中有一个内联元素span。下面分情况讨论如何让div和span在父容器中水平与垂直居中。
水平居中
- 块状元素
要让上述的div水平居中非常简单，利用margin即可。将margin的水平方向设置为auto即可达到水平居中效果。
div{
width:200px;
margin:0 auto;
}
- 内联元素
对于文本、图片等内敛元素的居中，可以通过设置其块状元素的父容器中的text-align属性：
div{
width:200px;
margin:0 auto;
text-align: center;
}
在上述div中的样式中加入text-align:center的属性，则div中的内联元素就会居中显示。
垂直居中
- 块状元素
块状元素的垂直居中可以利用相对定位或者绝对定位，当元素设置相对定位或者绝对定位时，设置其top和left为50%，这样它的左上角就会在已定位的父容器的中间。（注：此处设置相对定位不起作用，因为50%是相对于body的高度的一半，而此时body的高度由div决定。而绝对定位在此处是相对于初始包含块的，也就是画布或者HTML元素。）
为了让整体元素垂直居中，而不是左上角居中，可以借助margin属性，令其margin-left为负的宽度的一半，margin-top为负的高度的一半。如下：
div{
width:200px;
height: 500px;
top:50%;
left:50%;
position:absolute;
margin-top:-250px;
margin-left:-100px;
}
这样就可以实现div的垂直居中，但是这种方法的前提是需要知道div的宽高，如果不知道的话该怎么办呢？
那就可以利用CSS3中的属性transform
div{
top:50%;
left:50%;
position:absolute;
transform: translate(-50%,-50%);
}
该属性可以相对于自身元素大小的50%进行移动，不用提前指定元素大小，所以相比来说这种方式比上面的margin的方式适应性更强。
- 内联元素
内联元素的居中可以通过设置line-height属性来定义:
span{
line-height: 300px;
}
这样该元素就会在这个300px的高度中居中显示。
特殊情况：flex布局
对于父容器为flex布局的块状元素的居中，可以对齐父容器设置：
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
