css样式

实现居中的方式：

1.固定宽度水平居中:

div{
	width:1190px;
	margin:0 auto;
}

2.文本居中

2.1 单行文本

水平居中:

{
	text-align:center;
}

垂直居中：

{
	line-height:容器的高度
}

2.2 多行文本

css样式：

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width:100px;
    height:200px;
}
.child{
    display: inline-block;
    background: lightblue;
}

div结构：

<div class="parent">
    <div class="child">测试文字测试文字测试文字测试文字</div>
</div> 

3.图片居中

3.1 line-height

css样式：

.parent{
    width:200px;
    text-align: center;
    line-height: 500px;
    background-color: gray;
}
.child{
    vertical-align: middle;
}

div结构：

<div class="parent" >
    <img class="child" src="http://192.168.4.67:8080/scssui/skin1/image/logo.png" width="50%" alt="test">
</div>  

3.2 table-cell

css样式：

.parent{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background: #ccc;
    width:500px;
    height:400px;
}
.child{
    vertical-align:middle;
}

div结构：

<div class="parent" >
    <img class="child" src="http://192.168.4.67:8080/scssui/skin1/image/logo.png" alt="test">
</div> 

4.在一个100%的容器内实现水平与垂直方向居中

4.1 transform（宽高固定及不固定的情况都适用）

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

css样式：

.mask{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
}
.mask-c{
    position: absolute;
    width: 500px;
    height:600px;
    top:50%;
    left:50%;
    background: #fff;
    border-radius: 8px;
    transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);/*ie9*/
    -webkit-transform:translate(-50%,-50%);
}

div结构：

<div class="mask">
    <div class="mask-c">
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
    </div>
</div>

4.2 flex（宽高固定及不固定的情况都适用）

支持IE10+

css样式：

.mask{
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
    display:flex;
	display: -webkit-flex; /* Safari */
    align-items:center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}
.mask-c{
    width:500px;
    height:300px;
    background: #fff;
}

div结构

<div class="mask">
    <div class="mask-c">
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
    </div>
</div>

扩展：使用felx使内容水平垂直居中

css样式：

.parent {
    display:flex;
	display: -webkit-flex; /* Safari */
    height: 200px;
    background: #ddd
}
p{
    border:1px solid #f00;
    margin:0;
    padding:0;
    width:25%;
    display:flex;
	display: -webkit-flex; /* Safari */
    align-items:center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}

div结构：

<div class="parent">
    <p>我是通过flex的水平垂直居中噢我是通过flex的水平垂直居中噢我是通过flex的水平垂直居中噢我是通过flex的水平垂直居中噢</p>
    <p>我是通过flex的水平垂直居中噢</p>
    <p>居中</p>
    <p>我是通过flex的水平垂直居中噢</p>
</div>

4.3 使用定位（适用于宽高固定的情况）

css样式：

.mask{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
    right:0;
    background: rgba(0,0,0,.5);
}
.mask-c{
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	height:400px;
	margin-left:-250px;
	margin-top:-200px;
	background:#fff;
}

div结构：

<div class="mask">
    <div class="mask-c">
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
        <p>测试弹出框垂直居中的问题</p>
    </div>
</div>