结合CSS3的新特性来总结垂直居中的实现方法

垂直居中从来都是前端开发中一个比较棘手的问题，但是随着CSS3新特性的不断推出，我们现在可以使用更简单、更优雅的方式实现垂直居中效果。本文就结合CSS3的新特性来总结一下垂直居中的实现方法。

Flexbox布局

Flexbox布局作为CSS3中新增的一种布局模式，简单且实用。使用Flexbox布局可以很容易地实现水平&垂直居中。

我们先来看一下如何使用Flexbox布局实现垂直居中：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

上述代码的作用如下：

• 将父元素的display设置为flex，变成一个Flex容器。
• 使用justify-content属性将子元素在 Flex 容器主轴上居中。
• 使用align-items属性将子元素在 Flex 容器侧轴上居中。

我们也可以只设置align-items: center，不过这样只能实现垂直居中效果。下面是一个Flexbox布局的示例，我们把整体的结构分为两部分，一部分是header，一部分是main，让main可以上下滚动。

<div class="container">
  <header>
    <h1>这里是Header</h1>
  </header>
  <main>
    <div class="content">
      <h2>这里是Main</h2>
      <p>这里是一些主要内容......</p>
    </div>
  </main>
</div>

.container {
  display: flex; /* 将整个容器设置为Flex容器 */
  flex-direction: column; /* 将子元素垂直排列 */
  min-height: 100vh; /* 将容器高度设置为视口高度，保证始终可以滚动 */
}
header {
  height: 80px; /* 头部固定高度 */
  background-color: #222; /* 头部背景色 */
  color: #fff; /* 文本颜色 */
}
main {
  display: flex; /* 将主体部分也设置为Flex容器 */
  justify-content: center; /* 将子元素在容器主轴上居中 */
  align-items: center; /* 将子元素在容器侧轴上居中 */
  flex-grow: 1; /* 子元素主轴占据整个宽度 */
}
.content {
  text-align: center; /* 子元素内部居中 */
}

Grid布局

除了Flexbox布局之外，CSS3的Grid布局也能够为我们提供简单可行，且易于管理网格布局的方案。下面介绍如何使用Grid布局实现垂直居中：

.parent {
  display: grid;
  place-items: center;
}

上述代码的作用如下：

• 将父元素的display设置为grid，变成一个Grid容器。
• 使用place-items属性使元素在容器内居中。

下面我们举一个Grid布局的示例，同样将内容区域分为两部分，一部分是头部显式的，贴着顶部，另一部分是主体，可以上下滚动。

<div class="container">
  <header>
    <h1>这里是Header</h1>
  </header>
  <main>
    <div class="content">
      <h2>这里是Main</h2>
      <p>这里是一些主要内容......</p>
    </div>
  </main>
</div>

.container {
  display: grid; /* 将整个容器设置为Grid容器 */
  grid-template-columns: 1fr; /* 只设置一个列 */
  grid-template-rows: min-content 1fr; /* 设置一个固定行，一个可以自由变化的行 */
  height: 100vh; /* 将容器高度设置为视口高度，保证始终可以滚动 */
}
header {
  height: 80px; /* 头部固定高度 */
  background-color: #222; /* 头部背景色 */
  color: #fff; /* 文本颜色 */
}
main {
  overflow: auto; /* 让主体可以滚动 */
}
.content {
  text-align: center; /* 子元素内部居中 */
}

以上就是结合CSS3的新特性来总结垂直居中的实现方法的攻略，建议您好好练习一遍。