1.水平居中：行内元素解决方案
适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）
html部分代码:文字元素css部分代码: nav, div{ text-align: center; }/*解决方案：将inline元素包裹在一个display属性为block的父级元素中（如,div, nav)设置这个父级元素属性: text-align:center即可*//* 现在大家可以看到nav和div中的子元素水平居中了 */
2. 水平居中：块状元素解决方案
对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中，如下：
html部分代码:水平居中的块状元素水平居中的块状元素
css部分代码:/*注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度*/div,p { width: 200px; /* 这里需要设置元素宽度 */ height: 150px; background: #222; color: #FFF;}/* 定义居中关键属性 */.center{ /* 这里可以设置顶端外边距 */ margin: 10px auto;}/* 现在大家可以看到居中效果的块状元素了 */
3.水平居中：多个块状元素解决方案
如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。
html部分代码:水平居中的块状元素水平居中的块状元素css部分代码:/*解决方案：设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为center即可*/.center{ display:inline-block;}body{ text-align:center;}/* 元素美化 */div{ width: 100px; background: #222; height: 50px; color: #FFF; padding: 10px;}
4.水平居中：多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可
html部分代码:水平居中的块状元素水平居中的块状元素css部分代码:解决方案：设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可body{ display: flex; justify-content: center;}/* 页面美化元素 */div{ width: 100px; background: #222; height: 50px; color: #FFF; padding: 10px; margin: 10px;}
5. 垂直居中：单行的行内元素解决方案
当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。
html部分代码: css部分代码:解决方案：将inline元素的高度和line-height设备为一致即可#container{ background: #222; height: 200px;}/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */a{ height: 200px; line-height:200px; color: #FFF;}
6.垂直居中：多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：
html部分代码: css部分代码:解决方案：使用display:table-cell和vertical-align来控制元素的居中效果.container{ background: #222; width: 300px; height: 300px; /* 以下属性垂直居中 */ display: table-cell; vertical-align:middle;}a{ color:#FFF;}
7. 垂直居中：已知高度的块状元素解决方案
html代码： css代码：解决方案：将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值div{ width: 100px; height: 100px; background: #222}/* 以下为居中代码 */.item{ top: 50%; margin-top: -50px; position: absolute; padding:0;}/* 现在可以看到这个元素垂直居中了，如果元素有padding设置，请自己相对计算一下margin-top值 */ 8.垂直居中：未知高度的块状元素解决方案
对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：
html代码：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.css代码：解决方案：因为无法指定margin-top的偏移量，所以这里使用transform属性，垂直移动-50%即可div{ width: 150px; background: #222; color: #FFF;}/* 元素垂直居中代码 */.item{ top: 50%; position: absolute; transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */}
9. 水平垂直居中：已知高度和宽度的元素解决方案
html代码： css代码：解决方案：将设置元素绝对定位，并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可div{ width: 150px; height: 150px; background: #222; color: #FFF;}.item{ position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px;}/* 以上代码即可保证一个已知高度和宽度的元素水平垂直都居中 */ 10.水平垂直居中：未知高度和宽度元素解决方案
html代码：Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.css代码：解决方案：将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可div{ background: #222; color: #FFF;}/* 以下代码保证元素在水平和垂直方向上绝对居中 */.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
11.水平垂直居中：使用flex布局实现
html代码：css代码：解决方案：设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可/* 子元素CSS */.item{ background: #222; color: #FFF; width: 100px; height: 100px;}.parent{ display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px;}
注：以上资源整理自极客标签学习文档，推荐大家学习使用
附上网址：http://www.gbtags.com