一、水平居中
margin实现水平居中
在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果
margin: 0 auto;
优点：实现方法简单易懂，浏览器兼容性强；
缺点：扩展性差，无法自适应未知项情况。
inline-block实现水平居中方法
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果
.parent{
text-align: center;
}
.children{
display: inline-block;
}
优点：简单易懂，扩展性强；
缺点：需要额外处理inline-block的浏览器兼容性。
浮动实现水平居中的方法
让ul为position:relative;left:50%，再让li向左浮动，再让position:relative;right:50%（或者left:-50%)
绝对定位实现水平居中
需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用margin-top不方便，就决定使用绝对定位来设置。
实现方法：
方法一、知道容器尺寸的前提下
.element { 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ }
缺点：该种方法需要提前知道容器的尺寸，否则margin负值无法进行精确调整，此时需要借助JS动态获取。
方法二、容器尺寸未知的前提下，使用CSS3的transform属性代替margin，transform中的translate偏移的百分比值是相对于自身大小的，设置示例如下：
.element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ -webkit-transform: translate(-50%, -50%); }
缺点：兼容性不好，IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。
方法三、margin: auto实现绝对定位元素的居中
.element { 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ }
CSS3的flex实现水平居中方法
1.单个元素水平居中：flex弹性布局justify-content属性实现元素居中
.parent
display: flex;
justify-content: center;//让外面的父元素居中，盒子里面的元素自然就居中了，它的好处是不需要对居中的子元素设置任何样式，如：width、margin
}
2.多个h1元素水平居中
flex弹性居中
.parent{
display: flex;
}
.children{
flex: 几份;
}
CSS3的fit-content实现水平居中方法
fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。
在不设置宽度，并且元素中含用float:left情况下居中
ul{ -moz-fit-content; -webkit-fit-content; fit-content; margin: auto; }
目前这个属性只支持Chrome和Firefox浏览器
二、垂直居中
1.不知道自己高度和父容器高度的情况下, 利用绝对定位：
parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可
parentElement{ height:xxx; } .childElement { position: relative; top: 50%; transform: translateY(-50%); }
Flex 布局：
不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：
parentElement{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ }
三、水平垂直居中
方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，
兼容性：,IE7及之前版本不支持
div{ 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }
方案二：
div绝对定位水平垂直居中【margin 负间距】
div{ 200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }
方案三：
div绝对定位水平垂直居中【Transforms 变形】
兼容性：IE8不支持；
div{ 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
方案四：
css不定宽高水平垂直居中
.box{ height:600px; display:flex; justify-content:center; align-items:center; /* aa只要三句话就可以实现不定宽高水平垂直居中。 */ } .box>div{ background: green; 200px; height: 200px; }
方案五：
将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
<p class="outerBox tableCell">
<p class="ok">
<p class="innerBox">tableCell</p>
</p>
</p>
/*
table-cell实现居中
将父盒子设置为table-cell元素，设置
text-align:center,vertical-align: middle;
子盒子设置为inline-block元素
*/
.tableCell{
display: table;
}
.tableCell .ok{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tableCell .innerBox{
display: inline-block;
}
方案六：
对子盒子实现绝对定位，利用calc计算位置
<p class="outerBox calc"> <p class="innerBox">calc</p> </p> /*绝对定位，clac计算位置*/ .calc{ position: relative; } .calc .innerBox{ position: absolute; left:-webkit-calc((500px - 200px)/2); top:-webkit-calc((120px - 50px)/2); left:-moz-calc((500px - 200px)/2); top:-moz-calc((120px - 50px)/2); left:calc((500px - 200px)/2); top:calc((120px - 50px)/2); }