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

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

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

1.水平居中

margin: 0 auto;

效果图：

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

#test{
width: 200px;
height: 200px;
line-height: 200px;
background: red;
margin: 0 auto;
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 id="inner">
　　　　test
　　</div>

</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的垂直水平居中就介绍完了，当然，可能存在些许错误望大家海涵并在评论区多多指正交流，谢谢大家花费时间阅览！