中秋快到了，祝大家中秋快乐。
平时大家写bug过程中肯定会遇到让div框水平或者垂直居中，然而有时候能居中，有时候不能居中。我把平时遇到的一些方法写出来，如果对你有用，那便是晴天。
1、text-align: center;
text-align: center;
这个是最简单的了，实现文本水平居中。
2、margin： 0 auto;
0为上下边距为0，auto为左右边距自适应，于是变实现了水平居中。高度固定时，加上line-height就能实现垂直居中。代码如下：
margin: 0 auto;
height: 100px;
line-height: 100px;<!-- 高度固定时使用 -->
3、子元素基于父元素实现居中
采用绝对定位，使子div框定位跟着父div框，再让子div框左右边距自适应，于是边形成了水平垂直居中。
效果如图1所示。
图1
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
width: 200px;
height: 200px;
border: 1px red solid;
margin:0 auto;
position: relative
}
.child {
width: 100px;
height: 100px;
border: 1px red solid;
position:absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
4、弹性盒子实现居中
display: flex;
align-items: center; /*定义父元素的元素垂直居中*/
justify-content: center; /*定义子元素的里的元素水平居中*/
还有使用absolute与transform配合实现居中的，看小伙伴自己选择了。
本文到这里就结束了，中秋快乐，有缘再会。