版权声明：本文为CSDN博主「杜媛媛」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_37580235/article/details/82317240

---

水平居中

 ●行内元素

实现行内元素的水平居中，分两种情况讨论：

①父级元素是块级元素：直接给父级元素添加text-align:center

②父级元素是行内元素：给父级元素设置display:block（以块级元素显示）或者display:inline-block（以行内块级元素显示），再给父元素添加text-align:center

●块级元素

方案一：（两种情况）

①父级元素设置了宽度：为需要居中的块级元素设置margin:0 auto

②父级元素没有设置宽度：为需要居中的块级元素设置display:block或者display:inline-block，再给父级元素设置text-align:center

方案二：使用定位属性（两种情况）

①父级元素设置了宽度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置left:50%和margin-left:-需要居中元素宽度的一半，margin-left可用CSS3新增属性代替transform:translateX(-50%)

②父级元素没有设置宽度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置left:50%和transform:translateX(-50%)

方案三：使用flexbox弹性布局

只需要给需要居中的元素的父级元素添加display: flex和justify-content: center，此方案不管父级元素的宽度设置与否都适用

---

垂直居中

●单行的行内元素

设置需要居中的行内元素的行高等于父级元素的高度：line-height: 父级元素的高度

●多行的行内元素

设置父级元素display:table-cell（元素以单元格形式显示）和vertical-align-middle（水平居中）

●块级元素

方案一：使用定位属性

①父级元素设置了高度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置top:50%和margin-top:-需要居中元素高度的一半，margin-left可用CSS3新增属性代替transform:translateY(-50%)

②父级元素没有设置高度：设置父级元素为相对定位position:relative，需要居中的元素设置position:absolute，然后再设置子元素的位置Top:50%和transform:translateY(-50%)

方案二：使用flexbox弹性布局

只需要给需要居中的元素的父级元素添加display: flex和align-items: center，此方案不管父级元素有没有设置高度都可适用

---

水平垂直居中

●已知高度和宽度的元素

方法一：给父级元素设置position:relative，给需要居中的元素设置position:absolute和top:0; bottom：0; left:0; right:0; margin: auto;

方法二：给父级元素设置position:relative，给需要居中的元素设置position:absolute和left: 50%;  top: 50%;  margin-left: -需要居中元素宽度的一半px;  margin-top: -需要居中元素高度的一半px;

●未知高度和宽度的元素

方案一：使用定位属性

给父级元素设置position:relative，给需要居中的元素设置position:absolute和left: 50%;  top: 50%;  transform: translate(-50%  -50%);

方案二：使用flex布局实现

给父级元素设置display:flex和justify-content: center; align-items: center;