CSS实现水平垂直居中的几种方法

目录

前言

元素示例

1、行内元素

2、Flex布局

3、绝对定位+margin:auto

4、绝对定位（已知宽高）

5、绝对定位（未知宽高）

6、Grid布局(子元素设置)

7、Grid布局（父元素设置）

8、Table布局

总结

---

前言

作者：🤶马可家的菠萝

在我们日常开发中，会经常涉及到元素水平和垂直居中的需求，而元素水平和垂直居中是实现美观布局的重要手段。本文将介绍几种常见的实现水平和垂直居中的方法，并分析各自的优缺点，帮助大家更好地掌握这一技能。

元素示例

<div class="parent">
   <div class="child">child</div>
</div>

1、行内元素

.parent {
   text-align: center; /* 文本居中 */
   line-height: 200px; /* 通过行高实现垂直居中 */
   height: 200px;
}
.child {
   display: inline-block; /* 将子元素设为行内块，以实现宽度和高度设置 */
   width: 80px;
   height: 40px;
}

优点

实现简单，只需设置文本居中和调整行高。

兼容性好，适用于大部分浏览器。

缺点

依赖于父元素的行高，可能需要调整字体大小或行高来达到理想的垂直居中效果。

不适用于块级元素或需要设置宽度和高度的元素。

2、Flex布局

.parent {
  width: 600px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.child {
  width: 80px;
  height: 40px;
  border: 1px solid green;
}

优点

方便快捷，只需设置几个属性即可实现水平和垂直居中。

易于维护，适合响应式设计。

兼容性较好，除IE10及以下版本外，其他浏览器均支持。

缺点

在IE10及以下版本浏览器中可能无法正常工作。

3、绝对定位+margin:auto

.parent {
 position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid red;
}
.child {
  width: 80px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid green;
}

优点

可以实现水平和垂直居中。

不需要知道子元素的宽度和高度。

缺点

子元素需要设置绝对定位，可能导致与其他布局问题的冲突。

在某些情况下，可能需要清除浮动。

4、绝对定位（已知宽高）

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid red;
}
.child {
  width: 80px;
  height: 40px;
  border: 1px solid green;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -20px; /* 高度的一半 */
  margin-left: -40px; /* 宽度的一半 */
}

优点

可以精确控制子元素的位置。

不需要清除浮动。

缺点

需要提前知道子元素的宽度和高度。

子元素需要设置绝对定位，可能导致与其他布局问题的冲突。

5、绝对定位（未知宽高）

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid red;
}
.child {
  width: 80px;
  height: 40px;
  border: 1px solid green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

优点

可以实现水平和垂直居中。

不需要知道子元素的宽度和高度。

缺点

使用transform属性，可能影响其他元素的布局。

兼容性一般，某些浏览器可能不支持。

6、Grid布局(子元素设置)

.parent {
  width: 600px;
  height: 200px;
  border: 1px solid red;
  display: grid;
}
.child {
  justify-self: center;
  align-self: center;
  border: 1px solid pink;
}

优点

方便快捷，只需设置几个属性即可实现水平和垂直居中。

易于维护，适合响应式设计。

兼容性较好，除IE10及以下版本外，其他浏览器均支持。

缺点

在IE10及以下版本浏览器中可能无法正常工作。

7、Grid布局（父元素设置）

.parent {
  width: 600px;
  height: 200px;
  border: 1px solid red;
  display: grid;
  place-items: center
}

8、Table布局

.parent {
  width: 600px;
  height: 200px;
  border: 1px solid red;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

优点

实现简单，只需设置display为table和table-cell。

兼容性好，适用于大部分浏览器。

缺点

表格布局可能会引起其他布局问题。

不适用于现代前端开发的复杂布局。

总结

综上所述，Flex布局和Grid布局在现代浏览器中表现优秀，是更推荐的选择。而行内元素方式、绝对定位+margin:auto方式、绝对定位（已知宽高）方式和Table布局方式在特定情况下可能适用。绝对定位（未知宽高）方式在实际应用中较少使用。在实际开发中，请根据需求和兼容性选择合适的方式。