CSS水平垂直居中

一、利用margin:auto二、利用position: absolute三、弹性盒子四、利用水平对齐和行高五、grid

为方便理解，欢迎查看线上效果，在线试一试

一、利用margin:auto

元素有宽度和高度时，利用margin:auto设置元素水平垂直居中：

HTML代码如下：

<div class="div1"><div class="center"></div></div>

CSS代码如下：

.div1 {background-color: #eee;width: 200px;height: 200px;position: relative;}.div1 .center {width: 50px;height: 50px;background-color: forestgreen;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}

二、利用position: absolute

HTML代码：

<div class="div2"><div class="center"></div></div>

当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半，CSS代码如下：

.div2 {background-color: #eee;width: 200px;height: 200px;position: relative;margin-top: 20px;}.div2 .center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: 50%;top: 50%;margin-left: -25px;margin-top: -25px;}

当已知元素宽度和高度时，也可以利用calc计算属性设置top和left，CSS代码如下：

.center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: calc(50% - 25px);top: calc(50% - 25px);}

当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)，CSS代码如下：

.center {width: 50px;height: 50px;background-color: rgb(34, 71, 139);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

实现效果：

三、弹性盒子

通过为其父元素设置display: flex来实现居中。

HTML代码如下：

<div class="div4"><div class="center"></div></div>

CSS代码如下：

.div4 {background-color: #eee;width: 200px;height: 200px;position: relative;margin-top: 20px;display: flex;justify-content: center;align-items: center;}.div4 .center {width: 50px;height: 50px;background-color: rgb(240, 248, 166);}

实现效果：

四、利用水平对齐和行高

设置text-align和line-height实现单行文本水平垂直居中。

HTML代码如下：

<div class="div5"><p class="center">我要居中</p></div>

CSS代码如下：

.div5 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;}.div5 .center {text-align: center;line-height: 200px;}

实现效果：

五、grid

HTML代码如下：

<div class="div6"><p class="center">我要居中</p></div>

在网格项目中设置justify-self、align-self或者margin: auto，CSS代码如下：

.div6 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;display: grid;}.div6 .center {align-self: center;justify-self: center;/* margin: auto; */}

在网格容器上设置justify-items、align-items或justify-content、align-content，CSS代码如下：

.div6 {background-color: #eee;width: 200px;height: 200px;margin-top: 20px;display: grid;align-items: center;justify-items: center;/* align-content: center;justify-content: center; */}