1.元素的水平居中
<1>行内元素水平居中
利用text-align:center可以实现块级元素内部的行内元素的水平居中，此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效，如果内部是块级元素没有设置宽度，宽度会占满父级元素，内容也会居中。如果设置宽度内容会在子元素的宽度范围内居中，如果希望子元素相对父级内容居中，可以将子元素设置为行内块元素。
<style>
.parent{
text-align: center;
background: red;
}
.child{
width: 400px;
height: 100px;
display: inline-block;
background: pink;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
<2>块级元素的水平居中
（1）table+margin
<style>
.parent{
background: red;
}
.child{
width: 400px;
height: 100px;
background: pink;
/* 设置为table类似于block,不设置宽度宽度是内容,可定义设置宽度*/
display: table;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
(2)设置margin-left和margin-right为auto
<style>
.parent{
background: red;
}
.child{
width: 400px;
height: 100px;
background: pink;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
（3）absolute+transform(transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加前缀)或absolute+margin-left(只适合知道宽度)
<style>
.parent{
position: relative;
background: red;
}
.child{
background: pink;
width: 400px;
height: 100px;
position: relative;
left: 50%;
transform: translateX(-50%);
/*margin-left:-200px;*/
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
（4）flex+margin或flex+justify-content
<style>
.parent{
background: red;
display: flex;
/*justify-content: center;*/
}
.child{
background: pink;
width: 400px;
height: 100px;
margin:0 auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
2.元素的垂直居中
<1>行内元素的垂直居中
<style>
.parent{
background: red;
height: 400px;
line-height: 400px;//只适合只有一行子元素的
/*多行的行内元素可以设置display:flex;+align-items:center或者display:table;+子元素display:table-cell;vertical-align:middle;*/
}
.child{
background: pink;
}
</style>
<body>
<div class="parent">
<span class="child">元素的居中</span>
</div>
</body>
<2>块级元素的垂直居中
(1)flex+align-items
<style>
.parent{
background: red;
height: 400px;
display: flex;
align-items:center;
}
.child{
background: pink;
width: 400px;
height: 100px;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
(2)table(父元素)+table-cell+vertical-align
<style>
.parent{
background: red;
height: 400px;
display: table;
}
.child{
background: pink;
width: 400px;
height: 100px;
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
(3)absolute+transform或absolute+margin-top（只适合知道子元素高度）
<style>
.parent{
background: red;
position:relative;
}
.child{
background: pink;
width: 400px;
height: 100px;
diplay:absolute;
top:50%;
transform: translateY(-50%);
//margin-top:-50px;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
3.元素水平垂直居中
（1）flex(不兼容IE8，9)
<style>
.parent{
background: red;
height: 400px;
display: flex;
justify-content: center;
align-items:center;
}
.child{
background: pink;
width: 400px;
height: 100px;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
（2）absolute+transform（IE8不支持属性需要写浏览器厂商前缀）或absolute+margin
<style>
.parent{
background: red;
height: 400px;
position: relative;
}
.child{
background: pink;
width: 400px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
//margin-top:-50px;margin-left:-200px;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
(3)table 跨浏览器兼容性较好
<style>
.parent{
background: red;
height: 400px;
display: table;
}
.child{
background: pink;
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>
（4）absolute+margin
<style>
.parent{
background: red;
height: 400px;
position: relative;
}
.child{
background: pink;
width: 400px;
height: 100px;
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
margin: auto;
}
</style>
<body>
<div class="parent">
<p class="child">元素的居中</p>
</div>
</body>