[分享]css不固定高度 div水平居中显示

CSS中的元素在网页设计中经常被用来进行布局，但其高度往往不是固定的。在这种情况下，我们需要通过CSS来进行水平居中显示。下面介绍两种实现方法：方法一： 这里是内容 .container { dis...

CSS中的元素在网页设计中经常被用来进行布局，但其高度往往不是固定的。在这种情况下，我们需要通过CSS来进行水平居中显示。下面介绍两种实现方法：

方法一：

<div class="container">
  <div class="content">这里是内容</div>
</div>

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

.content {
  width: 80%;
} 

方法二：

<div class="container">
  <div class="content">这里是内容</div>
</div>

.container {
  text-align: center;
}

.content {
  display: inline-block;
  width: 80%;
  text-align: left;
} 

以上两种方法均通过设置容器元素（.container）的样式来实现水平居中显示。方法一通过设置display为flex实现，同时设置justify-content属性来居中显示；方法二则是通过设置text-align为center实现，并将内部元素（.content）的display设置为inline-block并设置宽度来让它居中显示。

需要注意的是，上述方法只适用于不固定高度的元素，当固定高度时，可以使用margin属性来实现垂直居中显示。