二、垂直居中
实现垂直布局也是比较简单的，方法也比较多，这里总结了 6 种常用的布局方法，其公共的 CSS 代码如下所示：
.parent { height: 500px; width: 300px; margin: 0 auto; background-color: #ff8787;}.child { width: 300px; height: 300px; background-color: #91a7ff;}
复制代码
其 HTML 结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的 300px*300px，代码如下：
<div class="parent"> <div class="child"></div></div>
复制代码
最终的实现效果如下：
1.行内块级元素垂直居中
若元素是行内块级元素, 基本思想是子元素使用 display: inline-block, vertical-align: middle;并让父元素行高等同于高度。
实现 CSS 代码如下：
.parent { /* 为父级容器设置行高 */ line-height: 500px;}.child { /* 将子级元素设置为 inline-block 元素 */ display: inline-block; /* 通过 vertical-align: middle; 实现居中 */ vertical-align: middle;}
复制代码
2.定位方式实现(方法一)
第一种通过定位的方式实现就比较简单，实际就是通过 top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。
实现 CSS 代码如下：
.parent { /* 为父级容器开启相对定位 */ position: relative;}.child { position: absolute; top: 50%; /* margin-top: 等于负高度的一半 */ margin-top: -150px;}
复制代码
3. 定位方式实现(方法二)
第二种通过定位的方式实现实现思路：top 和 bottom 将子元素拉伸至 100%，设置指定的高度，通过 margin:auto;即可实现垂直居中。
实现 CSS 代码如下：
.parent { /* 为父级容器开启相对定位 */ position: relative;}.child { height: 300px; position: absolute; /* 垂直拉满 */ top: 0; bottom: 0; /* margin: auto 即可实现 */ margin: auto;}
复制代码
4. 定位方式实现(方法三)
第三种通过定位的方式就比较灵活，适用于多种场合，使用 top 配合 tansform 即可。
实现 CSS 代码如下：
.parent { /* 为父级容器开启相对定位 */ position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}
复制代码
5. Flex 方案
通过 Flex 可以有很多方式实现这个垂直居中布局的效果。
实现 CSS 代码如下：
.parent { /* 开启 flex 布局 */ display: flex; /* 方法一 */ /* align-items: center; */}
.child { /* 方法二 */ margin: auto;}
复制代码
通过 Flex 布局实现不仅仅只有上面两种，这里只介绍最简单的方式。
6. Grid 方案
通过 Grid 实现居中布局比通过 Flex 实现的方式更多一些。
实现 CSS 代码如下：
.parent { display: grid; /* 方法一 */ /* align-items: center; */ /* 方法二 */ /* align-content: center; */}
.child { /* 方法三 */ /* margin: auto; */ /* 方法四 */ align-self: center;}
复制代码
以上就是垂直居中布局常用的几种方式。
评论