[分享]css中常用于水平居中

CSS中的水平居中是经常用到的技巧之一。在前端开发中，经常需要将一个元素居中显示，这时候就需要使用水平居中的方法了。常见的使用flex的居中方法如下：.container { display: fle...

CSS中的水平居中是经常用到的技巧之一。在前端开发中，经常需要将一个元素居中显示，这时候就需要使用水平居中的方法了。

常见的使用flex的居中方法如下：

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

这个方法可以将一个元素在父元素内水平垂直居中。display: flex;用于指定父元素为flex布局，justify-content: center;用于指定子元素水平居中，align-items: center;用于指定子元素垂直居中。

另外一个常见的使用position的居中方法如下：

.container {
  position: relative;
}

.element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} 

在这个方法中，父元素需要设置position: relative;，子元素需要设置position: absolute;。left: 50%;用于把子元素左侧移动到其父元素中心位置，transform: translateX(-50%);实现了自身宽度的一半居中。

最后一个常见的使用text-align的居中方法如下：

.container {
  text-align: center;
}

.element {
  display: inline-block;
} 

在这个方法中，父元素需要设置text-align: center;，子元素需要设置display: inline-block;。由于text-align: center;会使子元素居中显示，而inline-block会使父元素的宽度自动根据子元素调整，从而实现了水平居中。