CSS水平和垂直居中方式

CSS水平和垂直居中方式

1.1 行内元素的水平居中

/*行内元素水平居中*/
#div{
text-align:center;
}

1.2 块级元素的水平居中

/*块级元素水平居中*/
#div{
margin:0 auto;
}

1.3多个块级元素水

/*多个块级元素水平居中*/
#div-out{
text-align:center;
}
#div-in{
display:inline-block;
}

2.1 已知宽度高度的垂直水平居中

/*已知高度和宽度的水平垂直居中*/
#div-out{
position:relative;
}
#div-in{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}

2.2 未知宽度高度的垂直水平居中

/*未知高度和宽度的水平垂直居中*/
#div-out{
position:relative;
}
#div-in{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}

2.3 当被居中的元素是inline或者是inline-block

#div-out{
display:table-cell;
text-align:center;
vertical-align:middle;
}
#div-in{

}