CSS中的居中：完全指导

水平居中：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 p{ 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;
}