[分享]css中如何让div水平居中

在 CSS 中，我们经常需要让元素水平居中。其中，对于 div 元素的水平居中，有以下几种方法。

/* 方法一：使用 text-align 属性 */
div {
  text-align: center;
}

/* 方法二：使用 margin 属性 */
div {
  margin: 0 auto;
}

/* 方法三：使用 flexbox */
.parent {
  display: flex;
  justify-content: center;
}
 
.parent div {
  /* 必须指定宽度 */
  width: 200px;
} 

方法一：使用 text-align 属性

这种方法比较适用于单行文本或者图片的水平居中。

<div style="text-align: center;">这是一段居中文本</div> 

方法二：使用 margin 属性

这种方法适用于除了绝对定位元素以外的其他元素。

<div style="margin: 0 auto;">这是一段居中文本</div> 

方法三：使用 flexbox

这种方法适用于任何元素，并且可以同时实现水平和垂直居中。

<div class="parent">
  <div>这是一段居中文本</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 必须指定宽度 */
  height: 100vh; /* 必须指定高度 */
}
 
.parent div {
  /* 可以根据需求自由调整 */
  width: 200px;
  height: 100px;
} 
</style> 

通过这三种方法，我们可以轻松地让 div 元素水平居中。其中，方法三的 flexbox 还可以实现更多的居中方式，比如垂直居中、水平垂直居中等。