[分享]css不用定位如何高度居中

CSS不用定位如何高度居中？当遇到一个需要在容器中垂直居中的元素时，我们常常会想到使用CSS定位，比如设置top和transform，但是这种方法有时候并不完美，特别是在容器高度不固定的情况下。下面介...

CSS不用定位如何高度居中？当遇到一个需要在容器中垂直居中的元素时，我们常常会想到使用CSS定位，比如设置top和transform，但是这种方法有时候并不完美，特别是在容器高度不固定的情况下。下面介绍一些不用定位的方法来实现高度居中：

<div class="container">
  <div class="content">
    <p>Hello World!</p>
  </div>
</div> 

第一种方法是使用表格布局。将容器设置为表格，内容设置为表格单元格，然后使用vertical-align属性来垂直居中。

.container {
  display: table;
}

.content {
  display: table-cell;
  vertical-align: middle;
} 

第二种方法是使用flexbox。将容器设置为一个flex容器，然后将垂直居中的元素设置为flex项目，使用align-items属性来垂直居中。

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

.content {
  /* no special styles needed */
} 

第三种方法是使用CSS Grid布局。将容器设置为一个grid容器，然后将垂直居中的元素设置为grid项目，使用align-self属性来垂直居中。

.container {
  display: grid;
}

.content {
  align-self: center;
} 

以上三种方法都可以实现高度居中，而且不需要使用CSS定位。根据实际需求来选择适合的方法。