方式一：margin:0 auto实现div水平垂直居中；
示例：
.wrap{
margin：0 auto;
}
<div class="wrap">w3cschool</div>
方式二：利用line-height和height为同一高度可实现文字的水平居中；
示例：
.wrap{
line-height: 200px;/*垂直居中关键*/
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}
<div class="wrap">w3cschool</div>
方式三：利用padding和background-clip配合实现div的水平垂直居中；
示例：
<div class="parent"> <div class="children"></div></div>
.parent{
margin:0 auto;
width:200px;
height:200px;
background-color:red;
}
.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
background-clip:content-box;/*居中的关键*/
方式四：对于不定高和宽的div，可以用绝对定位和translate(-50%,-50%) 实现div水平垂直居中
示例：
<style>
#ex3_container{
width:200px;
height:200px;
background-color:yellow;
position:relative;
}
#ex3_content{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray;
color:white;
}
</style>
<div id="ex3_container"><div id="ex3_content">Hello World</div></div>
方式五：绝对定位居中加margin: auto实现子div在父div中居中
示例：
<style>
.ex3_container{
width: 200px;
height: 200px;
background-color: pink;
position: relative
}
.Absolute-Center {
background-color: red;
position: absolute;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
<div class="ex3_container"><div class="Absolute-Center">Hello World</div></div>
方式六：用css3的flex实现水平垂直居中
示例：
<div class="parent">
<div class="children">我是通过flex的水平垂直居中噢！</div>
</div>
html,body{
width: 100%;
height: 200px;
}
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:100%;
height:100%;
background-color:red;
}
.children {
background-color:blue;
}
方式七：vertical-align 属性设置元素的垂直对齐方式。
说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
image.png
