，1.水平居中
a).如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center来实现的。当被设置元素为块状元素时用 text-align：center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。
b).定宽块状元素，对其板块本身进行设置：width:500px; margin:20px auto;
2.垂直居中
a).父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
b).父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：使用插入 table (包括tbody、tr、td)标签，同时设置vertical-align：middle
3.margin: auto 居中
div.center { background: hsl(60, 100%, 97%); }
div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }
4.table-cell 居中
可以实现水平垂直都居中。通常需要添加一个额外的空元素。
5.Absolute 居中
.absolute-aligned { position: relative; min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img { width: 50%;
min-width: 200px;
height: auto;
overflow: auto; margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
6.使用 translate 居中
.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto; }
7.使用 Flexbox 居中
.center { background: hsl(240, 100%, 97%); display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
display: -moz-box; /* OLD: Firefox (can be buggy) */
display: -ms-flexbox; /* OLD: IE 10 */
display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
8.使用 calc 居中
.center img { width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
top: calc(50% - 20%); left: calc(50% - 20%); }
9.单行文本垂直居中，
html
div id="parent"> <div id="child">Text here</div> </div> css
#child {line-height: 200px; } 10.垂直居中一张图片
html
<div id="parent">
<img src="image.png" alt="" />
</div>
css
#parent {line-height: 200px; } #parent img { vertical-align: middle; }