水平居中
- 行内元素
行内元素水平居中非常简单，设置属性"text-align:center;“即可。
2.块级元素
块级元素水平居中，设置属性"margin:0 auto;"
****注：里面关键的是后面的属性值auto,既"margin-left:auto"和"margin-right:auto"****
垂直居中
Line-Height Method
Paste_Image.png
<strong>适用范围：单行文本垂直居中</strong>
代码
html
<div id="parent">
<div id="child">Text here</div>
</div>
css
#child {
line-height: 200px;
}
垂直居中一张图片，代码如下:
html
<div id="parent">
<img src="image.png" alt="" />
</div>
css
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
****注：该方法的重点在于line-height的高度等于块级元素的内容框高度(一般都是指:height值)****
CSS Table Method###
Paste_Image.png
****适用范围：通用****
代码：
html
<div id="parent">
<div id="child">Content here</div>
</div>
css
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
低版本 IE fix bug：
#child {
display: inline-block;
}
****注：vertical-align:middle这个属性一般情况下只对行内元素生效，对块级元素只有table-cell生效。参考文章****
Absolute Positioning and Negative Margin
Paste_Image.png
****适用：块级元素 但在IE版本低于7时不能正常工作****
代码：
html
<div id="parent">
<div id="child">Content here</div>
</div>
css
#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Equal Top and Bottom Padding
Paste_Image.png
****适用：通用****
代码：
html
<div id="parent">
<div id="child">Content here</div>
</div>
css
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
****注：用margin也可以做到同样的效果，但是必须注意下height的高度。****
Floater Div###
Paste_Image.png
****适用：通用。****
代码：
html
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
css
#parent {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
以上就是六种方法，可以在实际的使用过程中合理选择，参考文章《vertical-centering》。
网友评论