[分享]css元素水平垂直居中的方法

许多网页设计师和开发人员在布局网页时经常遇见css元素水平垂直居中的问题。下面介绍几种实现css元素水平垂直居中的方法。方法一：使用绝对定位和transform属性对于任何要水平垂直居中的元素，先使用...

许多网页设计师和开发人员在布局网页时经常遇见css元素水平垂直居中的问题。下面介绍几种实现css元素水平垂直居中的方法。
方法一：使用绝对定位和transform属性
对于任何要水平垂直居中的元素，先使用相对定位将其放到父元素的中心，然后使用绝对定位将其移动到父元素的中心。这里要用到left: 50%和top: 50%的绝对定位，再用transform属性进行微调。
样式代码如下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} 

方法二：使用flex布局
使用display: flex和justify-content: center、align-items: center让子元素在父元素居中。
样式代码如下：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
} 

方法三：使用table-cell布局
使用display: table和display: table-cell可以让子元素在垂直方向上居中，再使用text-align: center可以让子元素在水平方向上居中。
样式代码如下：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
} 

以上是三种常见的实现css元素水平垂直居中的方法，不同的方法适用于不同的布局情况，选择合适的方法可以让页面的布局更加美观。