CSS垂直居中的7中方法总结

CSS垂直居中的7中方法

---

为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较容易看出效果。代码如下：

// html
<div class="outer outer-box">
  <div class="inner inner-box"></div>
</div>

// css
<style>
.outer {
  height: 100px;
  width: 100px;
  background-color: royalblue;
}
.inner {
  height: 50px;
  width: 50px;
  background-color: red;
}
<style>

设置完的效果就是这样，然后我们需要把内部的div 水平垂直居中。准备就绪，正式开始。我们分别使用 Flex 布局，Position布局， Grid布局三种方式。

flex布局

Flex 是Flexible Box的缩写，意为”弹性布局”。Flexible Box 模型是一种一维的布局模型，一次只能处理一个维度上的布局。flex布局有两根轴线，主轴和交叉轴。flex就是根据这两个轴线布局元素。

1.1 对外层div设置flex布局

在外层 div 上设置 justify-content: center; align-items: center; 属性， display 设置为 flex。即可实现水平垂直居中。

1.2 内外div分别设置

结果如下图：

Flex实现水平处置居中

Position布局

Position布局是传统的布局方式，position属性指定定位方式，利用CSS盒模型实现定位布局。

2.1 内部div使用 margin 属性居中

2.2 内部 div 使用 transform 属性居中

实现结果如下：

Grid布局

Grid（网格）布局被称为最强大的CSS布局方案，它可以将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

上面这种布局，Grid非常擅长。Flex布局属于一维布局，Grid布局可以将容器分为行和列，对单元格进行布局，属于二维布局。

3.1 外层div使用 place-content 属性

3.2 外层div使用Grid布局

3.3 内外div分别设置

实现结果如下：

总结

常见的问题也不见得简单，前端知识还是常学常新的。了解不同类型的CSS布局方式，对处理实际问题也很有帮助。