css上下垂直居中对齐

概述 CSS的垂直居中对齐对于前端工程师来说是非常重要的技能之一。上下垂直居中最常见的情况是要将一些元素放在容器的中间位置。需要掌握以下几种方法。
方法一：使用Flexbox CSS3引入了Flexbox布局，这是实现垂直居中对齐的最佳方法之一。只需要将容器的 display 属性设置为 "flex"，然后使用 align-items 和 justify-content 属性即可。
html代码:

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

css代码:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}
<br>
.content {
  font-size: 48px;
} 

方法二：使用绝对定位 另一种常见的方法是使用绝对定位。将要居中的元素设置为绝对定位，然后使用top和left属性并设置值为50%。但是这样设置后，元素会在容器的左上角而不是居中位置，因为元素的左上角是对齐的。因此我们还需要设置元素的 margin-left 和 margin-top 属性的负值来将其移动到正中央。
html代码:

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

css代码:

.container {
  position: relative;
  height: 500px;
}
<br>
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
} 

方法三：使用table cell 最后一种方法是使用table-cell属性，将内容的外层容器设置为 display: table，将内容容器设置为 display: table-cell。然后使用 vertical-align: middle 属性实现对齐。
html代码:

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

css代码:

.container {
  display: table;
  height: 500px;
  width: 100%;
}
<br>
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 48px;
} 

总结 实现上下垂直居中对齐可以使用以上三种方法之一，选择一个合适的方法可以提高前端效率。需要注意的是，使用绝对定位和 table-cell 方法的时候需要在 CSS 匹配规则里对容器元素的高度进行约束，否则默认为零，容器内的元素将无法被居中。