本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中。
1.弹性布局（不换行）
justify-content:center：水平居中
align-items:center：垂直居中
.father {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: nowrap;justify-content: center;align-items: center;margin-bottom: 50px;}
2.弹性布局（换行）
justify-content:水平居中
align-content:center:垂直居中
.father1 {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: wrap;justify-content: center;align-content: center;margin-bottom: 50px;}
3.定位（2D变化）
利用定位的top及left初步进行居中定位，发现会多偏移宽高的二分子一，通过translate向左和向上移动元素自身宽高的一半，即可实现垂直居中效果。
.son2 {position: absolute;background-color: skyblue;top: 50%;left: 50%;transform: translate(-50%, -50%);}
4.定位（过度约束）
利用网页布局的过度约束原则（之前博客有过介绍）
.son3 {position: absolute;width: 100px;height: 100px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
5.单元格布局（table-cell）
text-align:center:水平居中
vertical-align:middle:垂直居中
.father4 {display: table-cell;width: 500px;height: 500px;background-color: pink;text-align: center;vertical-align: middle;}.son4 {display: inline-block;}
总体代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现水平垂直居中(子元素宽高无论有无与否,第四种子元素需要有宽高)</title><style>/* 方式一 */.father {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: nowrap;justify-content: center;align-items: center;margin-bottom: 50px;}.son {background-color: skyblue;}/* 方式二 */.father1 {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: wrap;justify-content: center;align-content: center;margin-bottom: 50px;}.son1 {background-color: skyblue;}/* 方式三 */.father2 {position: relative;width: 500px;height: 500px;background-color: pink;margin-bottom: 100px;}.son2 {position: absolute;background-color: skyblue;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 方式四 */.father3 {position: relative;width: 500px;height: 500px;background-color: pink;margin-bottom: 200px;}.son3 {position: absolute;width: 100px;height: 100px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}/* 方式五 */.father4 {display: table-cell;width: 500px;height: 500px;background-color: pink;text-align: center;vertical-align: middle;}.son4 {display: inline-block;}</style></head><body><div class="father"><div class="son">123</div><div class="son">456</div><div class="son">789</div></div><div class="father1"><div class="son1">人大由承心都，实就。</div></div><div class="father2"><div class="son2">范易头。dwdww</div></div><div class="father3"><div class="son3">啊承个嗣朋，承者想同服国，帅志。</div></div><div class="father4"><div class="son4">你治皇看久车书愚，智与都毒考自，高办才安，恶。</div></div></body></html>
6.利用行内块及vertical-align属性
核心思路：子元素须设置为行内块模式，通过给父级添加text-align:center实现子元素的水平居中。
垂直居中需要设置一个宽度为0，高度与父级等高的盒子，需要转为行内块模式，同时设置vertical-align:middle.最后给子元素设置vertical-align:middle即可
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>header {width: 500px;margin: 0 auto;height: 300px;background-color: #1d6add;text-align: center;}div {width: 0;height: 300px;display: inline-block;vertical-align: middle;}img {vertical-align: middle;}</style></head><body><header><div></div><img src="./imgs/1.png" alt="" width="300px"></header></body></html>
效果如图：
