【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;
}