【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的垂直居中

适配所有主流机型的APP

.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 属性。

Content goes here

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