关于css垂直水平居中的几种方式

css中元素的垂直水平居中是比较常见及较常使用的，在这里向大家介绍一下几种方式。

1.水平居中

margin: 0 auto;

效果图：

而文字的垂直水平居中也比较简单，加上line-height: 200px;与text-align: center;即可。

效果图：

2.元素的垂直水平居中

相对于文字来讲，元素的垂直水平居中就没这么简单，因为line-height: 200px;与text-align: center;都是针对文本的属性，对于元素我们需要使用定位。

a.已知元素高宽的垂直水平居中

#wrap{       position: relative;       width: 400px;       height: 600px;       background: red;       margin: 0 auto;      }              #inner{       position: absolute;       left: 50%;       top: 50%;       margin-left: -50px;       margin-top: -50px;       width: 100px;       height: 100px;       background: pink;     }

<div id="wrap">

</div>

效果图：

在这里需要注意margin-left与margin-top需要给定-50px即当前元素的一半而非-50%，因为%是相对于父元素的大小，所以这种需要已知元素的高宽。

而除了给margin负值外，还有一种方式：

#wrap{     position: relative;     width: 400px;     height: 600px;     background: red;     margin: 0 auto; }  #inner{     position: absolute;     left: 0;     right: 0;     top: 0;     bottom: 0;     margin: auto;     width: 100px;     height: 100px;     background: pink; }

效果图：

这里需要注意的是元素的高宽也需要定义，如果没有定义高宽元素会填充整个父元素。

而此种方式就要说到绝对定位盒子的特性：

 1.高宽有内容撑开

 2.水平方向上： left + right + width + padding + margin = 包含块padding区域的尺寸

 3.垂直方向上： top + bottom + height + padding + margin = 包含块padding区域的尺寸

我们可以尝试代入参数：

水平：0 + 0 + 100 + 0 + auto = 400

margin：auto根据公式可得300px及左右各分得150px，

垂直：0 + 0 + 100 + 0 + auto = 600

margin：auto根据公式可得500px及左右各分得250px，

而前面提到的如果没有定义高宽则高宽默认值为auto，

水平：0 + 0 + auto + 0 + auto = 400

垂直：0 + 0 + auto + 0 + auto = 600

元素会填充整个父元素即包含块尺寸均分配给高宽，由此可知高宽优先级高于margin。

而如果不定义margin: auto;

水平：0 + 0 + 100 + 0 + 0 = 400

垂直：0 + 0 + 100 + 0 + 0 = 600

数据均定死则不会分配margin

b.未知元素高宽的垂直水平居中

#wrap{     position: relative;     width: 400px;     height: 600px;     background: red;     margin: 0 auto; }  #inner{     position: absolute;     left: 50%;     top: 50%;     transform: translate3d(-50%,-50%,0);     background: pink; }

效果图：

对于translate3d(-50%,-50%,0)中的三个参数分别为x轴偏移自身一半、y轴偏移自身一半、z轴不动，但是在can i use中我们可以看到transform的兼容性并不是太好。

到此，css的垂直水平居中就介绍完了，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！