一.水平居中
（1）行内元素解决方案：父为块元素+text-align: center
只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
使用text-align: center;居中
对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。
<style type="text/css">
div.parent{
border: 1px solid red;
text-align: center;
} div span {
width: 100px;
background: #ddd;
}
</style>
----------------------------------- <div class="parent">
<span>行内元素居中</span>
<span>行内元素居中</span>
<span>行内元素居中</span>
</div>
（2）单个块状元素解决方案
父层元素使用text-align: center居中,子层元素使用 margin: 10px auto; 10px可改变，以设置顶端外边距；
<style type="text/css">
div.parent {
border: 1px solid red;
text-align: center;
} div p{
width: 100px;
background: #ddd;
/* 这里可以设置顶端外边距 */
margin: 10px auto;
}
</style> -----
<div class="parent">
<p>块元素居中</p>
</div>
（3）多个块状元素解决方案
将元素的display属性设置为inline-block，并且把父元素设置text-align：center即可:
<style type="text/css">
div.parent {
border: 1px solid red;
text-align: center;
} div p{
display: inline-block;
width: 100px;
background: #ddd;
}
</style> <div class="parent">
<p>块元素居中</p>
<p>块元素居中</p>
<p>块元素居中</p>
</div>
（4）多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px; /*flex*/
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
div span{ background: #808080; }
</style> <div>
<span>我是span元素</span>
</div>
二、垂直居中
（1）单行的行内元素解决方案 ：行内元素的height和line-height设置的和父元素一样高度即可实现垂直居中
div.parent {
background: #222;
height: 200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
--------------------
<div class="parent">
<a>我是a元素</a>
</div>
（2）多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：
<style type="text/css">
div.center-aligned {
border:1px solid red;
width: 200px;
height: 200px;
display: table;/*父容器使用display：table*/
}
div.center-core{
display: table-cell;/*包裹行内元素容器使用display：table-cell*/
text-align: center;/*水平居中*/
vertical-align: middle;/*垂直居中*/
}
span{ background: #ddd;
}
</style> -----------
<div class="center-aligned">
<div class="center-core">
<span>我是span元素</span>
<span>我是span元素</span>
</div>
</div>
（3）已知高度的块状元素解决方案:负margin和定位配合
好处是行内元素和块级元素都适用,但是需要知道元素本身的宽高度。
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
position: relative;
} div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 50%;
top: 50%;
margin-left: -75px;/*-自身width/2*/
margin-top: -25px;/*-自身height/2*/
}
</style> ------------ <div>
<span>我是span元素</span>
</div>
三.水平垂直居中
（1）已知高度和宽度的元素解决方案1：margin-auto和定位的组合使用
这是一种不常见的居中方法，可自适应，比方案2更智能，如下：
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
} div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style> --------------- <div>
<span>我是span元素</span>
</div>
（2）已知高度和宽度的元素解决方案2：负margin和定位配合
position 元素已知宽度 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50% ；margin-left: -自身width/2margin-top: -自身height/2
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
position: relative;
} div span {
width: 150px;
height: 50px;
background: #808080;
position: absolute;
margin: auto;
left: 50%;
top: 50%;
margin-left: -75px;/*-自身width/2*/
margin-top: -25px;/*-自身height/2*/
}
</style> ------------ <div>
<span>我是span元素</span>
</div>
（3）未知高度和宽度元素解决方案：使用translate居中
这种方法实现原理和负margin和定位的组合使用是一样的， 就是用css3的属性translate来达到和负margin一样的作用。translate是transform的一个值，在这里作用是定义2D转换。但是在IE9以下不支持
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
} div span {
width: 150px;
height: 50px;
background: #ddd;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style> ---------------
<div>
<span>行内元素居中</span>
</div>
（4）使用flex布局实现：使用flex居中不需要知道元素本身宽高以及元素的属性
<style>
div {
border: 1px solid red;
width: 200px;
/* 注意这里需要设置高度来查看垂直居中效果 */
height: 200px; /*flex*/
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
div span{ background: #808080; }
</style> -----
<div>
<span>我是span元素</span>
</div>
（5）calc和定位的组合使用
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc使元素居中的原理和负margin是一样的，calc 允许基于当前的页面布局计算尺寸。
计算公式为：
top: calc(50% - (自身高度height/ 2));
left: calc(50% - (自身高度宽度 / 2));
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
position: relative;
} div span {
width: 150px;
height: 50px;
background: #ddd;
position: absolute;
top: calc(50% - (50px / 2));
left: calc(50% - (150px / 2));
</style> -- <div>
<span>行内元素居中</span>
</div>