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

转载

mob604756e3cc85 2021-03-12 12:29:40

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

1.水平居中

margin: 0 auto;

效果图：

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

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

#test{
width: 200px;
height: 200px;
line-height: 200px;
background: red;
margin: 0 auto;
text-align: center;
}

效果图：

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

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>

效果图：

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

在这里需要注意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;
}

效果图：

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

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

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

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，

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

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

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

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

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

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

而如果不定义margin: auto;

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

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

数据均定死则不会分配margin

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

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;
}

效果图：

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