CSS中的居中：完全指导_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:37:59910浏览
水平居中：Horizontally
1.行内元素
text-align : center;
2.单个块级元素
你可以设置一个块级元素居中，如果你已经设置了这个块元素的宽度（width）的话，设置其margin-left和margin-right为auto就可以。如果你没有设width，块级元素通常会占满其父元素显示。
{
width : 200px;
margin : 0 auto;
}
通常情况下你不能让一个浮动元素居中
3.多个块级元素在一行内水平居中
此时你可以修改这些块级元素的display属性为inline-block或flexbox。
inline-block的情况
//父元素设置text-align为center
.inline-block-center{
text-align : center;
}
//子元素设置display为inline-block
.inline-block-center div{
display : inline-block;
text-align : left;
}
flexbox的情况:
直接设置父元素的display为flex,将父元素作为弹性伸缩盒显示
.flex-center{
display : flex;
justify-content : center;
}
垂直居中：Vertically
1.行内元素
1.1单行行内元素
有时候行内元素或文本元素看上去垂直居中，仅仅是因为其上下内边距设置了相同的值。
.link{
padding-top : 30px;
padding-bottom : 30px;
}
如果有时候你不想选择padding，那还有一种方法就是设置line-height的值与height的值相等。
.center-text-trick{
height : 100px;
line-height : 100px;
white-space : nowrap;
}
1.2多行元素
设置相同的padding-top和padding-bottom对多行元素也会产生垂直居中的效果。
但是如果padding设置不好使的时候，我们也可以使用table和table-cell。对display为table-cell的元素使用vertical-align为middle即可。
.center-table {
display : table;
height : 250px;
width : 240px;
background-color : white;
}
.center-table p {
display : table-cell;
margin : 0;
background-color : black;
color : white;
vertical-align : middle;
}
如果table过时了，那你可以尝试一下flexbox，一个flex子元素可以在其flex父元素中很简单的居中。
.flex-center-vertically{
display : flex;
justify-content : center;
flex-direction : column;
}
注意：垂直居中的条件必须是其父元素有一个固定的高度height。
如果以上几种垂直居中的方法就失效了，那就只能'ghost element'技术，用伪元素(pseudo element)了。一个满高的伪元素被放置在父容器中，要垂直居中的元素和它一起居中。
.ghost-center{
position : relative;
}
.ghost-center :: before{
content : "";
display : inline-block;
height : 100%;
width : 1%;
vertical-align : middle;
}
.ghost-center p{
display : inline-block;
vertical-align : middle;
}
2.块级元素
2.1知道元素的高度？
在网页布局中，不知道某个块元素的高度是很常见的，因为当块元素的宽度改变时，其内容也会随着改变高度。文本样式的变化也会改变文本的总体高度。文本内容大小的变化也会改变文本的总体高度。
有固定高宽比例的元素。比如img，当其调整大小时，也会改变高度。
但如果你知道元素的高度，那改元素垂直居中可以这样写：
.parent{
position : relative;
}
.child{
position : absolute;
top : 50%;
height : 100px;
margin : -50px;
}
2.2不知道元素的高度
我们还是可以把该元素先压到父元素一半的地方，然后再往上轻推一点，具体如下：
.parent{
position : relative;
}
.child{
position : absolute;
top : 50%;
transform : translateY(-50%);
}
2.3是否可以利用CSS3的flexbox呢？
可以的，并且很简单。
.parent{
display : flex;
flex-direction : column;
justify-content : center;
}
3.水平+垂直居中
1.元素有固定的宽度和高度
先对元素绝对定位，让其先定位在父元素的50%/50%处，然后使用负外边距，使其等于元素宽度和高度的一半，具体代码如下
.parent{
position : relative;
}
.child{
width : 300px;
height : 100px;
padding : 20px;
position : absolute;
top : 50%;
left : 50%;
margin : -70px 0 0 -170px;
}
2.元素的宽度和高度未知
如果你不知道元素的宽度和高度，你可以使用CSS3的transition过度属性，使用translate函数，并在X,Y两个方向都移动该元素高宽的-50%。
.parent{
position : relative;
}
.child{
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
}
3.使用CSS3的flexbox
需要使用flexbox的两个方向上的居中属性，代码如下：
.parent{
display : flex;
justify-content : center;
align-items : center;
}
结论：利用css，你可实现完全的居中。
原文：https://css-tricks.com/centering-css-complete-guide/