web前端实现CSS实现水平或垂直居中技巧合集

1、Line-height

适用情景：单行文字（垂直居中）

原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。

html：

Lorem ipsam.

css：

.example{

width: 400px;

background: #afddf3;

line-height: 50px;

}

2、Line-height + inline-block

原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。

由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size：0来消除，从而达到完美的垂直居中。

css：

.example2{

width: 400px;

border: 1px solid #dcdcdc;

line-height: 100px;

font-size: 0;

}

.example2 .con {

display: inline-block;

line-height: 2;

vertical-align: middle;

width: 300px;

font-size: 15px;

background: #afddf3;

}

3、:before + inline-block

原理：:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度。

我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了。

此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0，子元素font-size: 15px即可。

CSS:

.example3 {

margin-top: 10px;

width: 400px;

height: 150px;

font-size: 0;

border: 1px solid #dcdcdc;

}

.example3::before {

content: ‘’;

display: inline-block;

height: 100%;

width: 0;

vertical-align: middle;

}

.example .con {

width: 300px;

font-size: 15px;

background: #afddf3;

display: inline-block;

vertical-align: middle;

}

4、table + margin

适用情景：单对象（水平居中）

原理：将子元素设置块级表格ÿ