css水平垂直居中
第一种：flex布局水平垂直居中
思路：
给父盒子display属性设置flex值，然后使用justify-content与align-item属性进行居中。
参考:阮一峰的flex教程
核心代码：
设置在父元素身上。
display: flex;//父元素flex布局justify-content: center;//子元素水平居中align-items: center;//子元素垂直居中
总代码：
<!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>.bigbox{width: 600px;height: 600px;border: 1px solid black;/* 黑色边框 */display: flex;/*父元素flex布局*/justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/}.centbox{width: 200px;height: 200px;background-color: aquamarine;}</style></head><body><div class="bigbox"><div class="centbox"></div></div></body></html>
第二种：绝对定位和transform配合
思路：
先设置父元素postion:relative，因为之后要设置子元素postion:absolute，绝对定位是相对外层第一个不是static的父盒子进行定位。static是postion的默认属性
然后把子元素的top和left都设置为50%，这时发现子盒子是向右下偏移了一些，再用transform属性把盒子偏移回来。
核心代码：
position: absolute;/*设置绝对定位*//*相对第一个不是static定位的父盒子进行定位*//*static是postion的默认属性*/left: 50%;top: 50%;/*距离第一个不是static定位的父元素上边框与左边框50%*/transform: translate(-50%, -50%);/*向左移动50%本元素宽度*//*向上移动50%本元素高度*/
总代码：
<!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>.bigbox {height: 300px;width: 300px;border: 1px solid black;position: relative;}.centbox {height: 50px;width: 50px;background-color: aqua;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style></head><body><div class="bigbox"><div class="centbox"></div></div></body></html>
第三种：绝对定位与外边距auto配合
思路：
盒子使用绝对定位，left，top，right，bottom都设置为0，再设置margin:auto把盒子自适应居中。
要把父盒子设置为position:relative
核心代码：
position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;/*自适应外边距*/
总代码：
<!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>.bigbox {height: 300px;width: 300px;border: 1px solid black;position: relative;}.centbox {height: 50px;width: 50px;background-color: aqua;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><div class="bigbox"><div class="centbox"></div></div></body></html>
第四种：p标签文字水平垂直居中
思路：
text-align用来文字水平居中，再把p标签line-height文字行高设置为父元素高度，就可以实现水平垂直居中。
核心代码：
text-align:center;line-height:600px;/*此时600px为父元素盒子高度*/
总代码：
<!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>.bigbox{width: 600px;height: 600px;border: 1px solid black;/* 黑色边框 */}.bigbox{text-align: center;line-height: 600px;}</style></head><body><div class="bigbox"><p>我要居中</p></div></body></html>
