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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。