CSS中的居中：完全指导_html/css_WEB-ITnose

水平居中：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/