[分享]css不限定宽高水平居中

在网页开发中，我们经常需要把元素居中，其中水平居中是一种常用的布局方式。但是，当元素的宽和高不确定时，如何让它水平居中呢？这时，CSS就派上用场了。// 在父元素上添加以下样式，让它成为一个 flex...

在网页开发中，我们经常需要把元素居中，其中水平居中是一种常用的布局方式。但是，当元素的宽和高不确定时，如何让它水平居中呢？这时，CSS就派上用场了。

// 在父元素上添加以下样式，让它成为一个 flex 容器
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 接着，在子元素上添加以下样式，就可以使它水平居中了
.child {
  margin: 0 auto;
} 

以上代码的作用分别是：

• 设置父元素为 flex 容器，使子元素可以在其中进行布局。
• 使用 justify-content: center 和 align-items:center 让子元素在父元素的水平和垂直方向上都居中。
• 给子元素添加 margin: 0 auto 样式，让它左右自动对齐，实现水平居中。

这种方法适用于绝大多数的情况，当然也可以用其它方式水平居中元素，例如使用 absolute 定位或者使用 CSS grid 布局。

在实际项目中，我们也可以使用这种方式去实现一些实用的布局效果，如导航条、模态框等的居中布局，这是一种灵活方便的技巧，建议掌握。