居中的几种情况

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了居中的几种情况相关的知识,希望对你有一定的参考价值。

1.水平居中
1.1行内元素的水平居中

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

 

1.2块级元素的水平居中

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

 

1.3多个块级元素水平居中

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

 

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

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


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

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

 

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

#body-div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
##body-div-container{

}

以上是关于居中的几种情况的主要内容,如果未能解决你的问题,请参考以下文章

CSS让图片垂直居中的几种技巧

DIV居中的几种方法

理解水平居中的几种表现

未知宽高的图片水平垂直居中的几种方法

未知宽度水平居中的几种方法

HTML中实现子容器垂直居中的几种方式