导航
导航
文章目录
  1. 水平居中
    1. 子元素为行内元素
    2. 子元素为宽度设定的块级元素
    3. 子元素为宽度未设定的块级元素
    4. 子元素为宽度设定的浮动元素
    5. 子元素为宽度未设定的浮动元素
  2. 垂直居中
    1. 子元素为行内元素
    2. 子元素为高度设定的块级元素
    3. 子元素为高度未设定的块级元素

CSS水平垂直居中总结

最近在做百度ife上2015春季的html,css练习,印象最深的就是各种情况下的水平垂直居中了,在这里总结一下,以后要用的时候如果忘了就可以直接在自己的博客里找啦。

水平居中

首先,居中肯定是子元素在一个父元素中居中,设置水平居中的前提是父元素必须是块级元素,且宽度已经设定。

子元素为行内元素

当子元素为行内元素时,子元素的宽度是由其内容撑开的,对父元素设定“text-align:center;”,就可实现子元素在父元素中水平居中。

子元素为宽度设定的块级元素

这种情况最简单的方法就是给子元素设定“margin:0 auto;”,相同的原理,也可以通过父元素和子元素的宽度计算出父元素的padding-left/padding-right或者计算出子元素的margin-left/margin-right,然后设置即可。

注意:如果子元素相对父元素绝对定位(此时父元素需要设置定位方式为相对定位,即position:relative;),对子元素样式设置如下:

1
2
3
4
5
6
7
.child {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
}

margin-left大小设置为子元素长度的一般,符号为负。

子元素为宽度未设定的块级元素

这种情况下,子元素宽度没有设定,那么子元素的水平方向上就会充满整个父元素的宽度,那么子元素就是水平居中的,其实这种情况下谈水平居中也没有意义。

子元素为宽度设定的浮动元素

当子元素为宽度设定的浮动元素时,设置其“margin:0 auto;”就无法实现水平居中了。可以通过父元素和子元素的宽度计算出父元素的padding-left/padding-right或者计算出子元素的margin-left/margin-right,然后设置,使浮动子元素水平居中。

子元素为宽度未设定的浮动元素

当浮动的子元素宽度未设定时,就无法通过计算padding和margin来使其水平居中了,这时可以用下面的方法。

1
2
3
<div class="parent">
<div class="child"></div>
</div>
1
2
3
4
5
6
7
8
9
10
.parent {
float:left;
position:relative;
left:50%;
}
.child {
float:left;
position:relative;
right:50%;
}

垂直居中

显然,设置垂直居中的前提是父元素的高度已经设定。

子元素为行内元素

此时,子元素高度由其内容撑开。设置父元素的line-height等于父元素的height即可。

子元素为高度设定的块级元素

和水平定位一样,根据父元素子元素高度算出父元素的padding-top/padding-bottom或者子元素的margin-top/margin-bottom即可。

同样,也可以利用子元素相对父元素绝对定位实现垂直居中(此时父元素需要设置定位方式为相对定位,即position:relative;)。对子元素样式设置如下:

1
2
3
4
5
6
7
.child {
position: absolute;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
}

margin-left大小设置为子元素高度的一般,符号为负。

子元素为高度未设定的块级元素

这种情况下,给父元素设定“display:table-cell;vertical-align:middle;”即可。

其实,对于水平和垂直居中,如果父元素个、宽度或者高度没有设定,设置父元素的padding-left与padding-right相等,或者padding-top与padding-bottom相等就可以让子元素看起来是居中的,但这样谈论没什么意义。