【CSS】水平居中与垂直居中

有宽度的div水平居中

1.左右margin设为auto即可
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}

2.绝对定位
.ele {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}

没有定义宽度的div水平居中

1.父容器text-align:center 子容器为display：inline-block
.container{
width: 500px;
margin: 0 auto;
text-align:center;
background:red;
}
.center{
display:inline-block;
}

有高度的div垂直居中

1.绝对定位 margin:auto

.content {
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

2.绝对定位 同水平居中

.ele {
	position: absolute;
	width: 高度值;
	left: 50%;
	margin-left: -(高度值/2);
}	

3.文字的垂直居中的很简单了 就是line-height就可以了

4.行内元素如img的垂直居中

    <p class="sditem1">适配所有主流机型的APP<img src="images/电工.png"></img></p>
    .sdTxtWrap img{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    }

这样图片的基准线就会对齐文本的中线，一定要记住vertical-align只能用于行内元素与table-cell！！

没定义高度的div垂直居中

1.使用表格的 vertical-align property 属性。

    <div class="wrapper">  
    <div class="cell">
        <div class="content"> Content goes here</div>
    </div>
</div>  

.wrapper {display:table;} 
.cell {
	display:table-cell; 
	vertical-align:middle;
}