问题：怎样实现div元素居中（垂直、水平）？
<body>
<div id="father">
<div id="child">
让我居中呀！
</div>
</div>
</body>
方法1：绝对定位法（transform属性）
使用css3的transform设置元素进行水平垂直居中，不需要知道元素的宽、高
用绝对定位来实现的垂直居中，取决与元素的宽度和高度，可以用下面这两个公式来计算元素的左边距和上边距：
元素的宽度/2 = 负左边距
元素的高度/2 = 负上边距
#father{
//假设主框为600*300
position: relative； /*很重要*/
width: 600px;
height: 300px;
background-color: blue:
}
#child{
position: absolute; /*很重要*/
/*子元素左上角定位到父级元素的正中间*/
top: 50%;
left: 50%;
/*子元素相对于自身左移上移到中间，实现居中定位*/
transform: translate(-50%,-50%);
background-color: lawngreen;
}
注意点:
（1）上述父级元素和子元素均采用绝对定位 position:absolute； 效果图如下：
（父元素也可以采用 relative）
但是：如果子元素采用相对定位：position: relative; 那只能实现垂直居中，效果如下：
(父元素没有定位时，子元素采用相对定位)
（2）上述方法利用了CSS3中的 transform:translate(x,y) 属性，这是子元素相对于自身的定位实现的x轴和y轴的偏移，如果子元素没有设置宽和高值的话可以用这个方法实现（做自适应页面的时候用到），如果已知子元素的宽和高，可以用下述方法实现。
方法2：定位法（相对位置）
利用position生成绝对定位的元素进行水平垂直居中，该方法需要知道元素的宽、高
<style>
#father{
position:relative;
width:600px;
height:300px;
background-color:deepskyblue;
border: 2px red dashed;
}
#child{
position: absolute;
width:200px;
height:100px;
top: 50%;
left: 50%;
/*transform: translate(-50%,-50%);*/
margin-left:-100px;
margin-top:-50px;
background-color: lawngreen;
/*内容居中*/
text-align: center;
line-height:100px; /*行间距和div宽度相同*/
}
</style>
效果如下：
方法3：定位法 margin：auto
使用position生成绝对定位与margin:auto结合让元素进行水平垂直居中，改方法需要设置元素的宽、高
<style>
#father{
position:relative;
width:600px;
height:300px;
background-color:deepskyblue;
border: 2px red dashed;
}
#child{
position: absolute;
width : 200px;
height : 100px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: lawngreen;
}
</style>
仅实现水平居中（子元素）：margin：0 auto； (当子元素position为非默认及relative时，这种设置会失效)
仅实现垂直居中（子元素）：margin：auto 0；
上述文字没有实现居中，可参考方法2中的居中，但是要注意：如<p>等标签中内的文字内容水平居中：使用{text-align:center}。垂直居中设置该元素的行高等于元素的高。
4. display：table-cell 实现法
display：table-cell 主要针对多行文字内容的垂直居中对齐。
通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果
display:table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
div {
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
border: 1px solid #F00;
}
本文章来源于https://blog.csdn.net/chenjuan1993/article/details/82628930
