1. 文本—水平居中
将文本置于一个容器的水平中点,给文本增加属性:
text-align:center;
2. 文本—垂直居中
单行文本垂直居中,只要将行高与容器高设为相等即可。
例如:
<div id="container">我是landingbj</div>
div#container {height: 30px; line-height: 30px;}
ps:如果有多行文字,可将行高设为容器高度的n分之一
3. 容器—水平居中
先为该容器设置一个明确宽度,然后将margin的水平值设为auto:
div .container {
width:500px;
margin:0 auto;
}
4. 容器—水平垂直居中
例如,有2个div,将内层div水平垂直居中:
<div class="outer">
<div class="inner">
</div>
</div>
将外层容器的定位为relative;内层定位absolute:
div .outer{position:relative;width:400px;height:400px;}
div .inner{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px;}
5.第二种方法-水平垂直居中
例如,有2个div,不知外层div的宽高,将内层div水平垂直居中:
<div class="outer">
<div class="inner">
</div>
</div>
将外层容器的定位为relative;内层定位absolute,
在这里使用css3的transform:translate(-50%,-50%);属性来实现元素自身的一个偏移:
div .outer{position:relative;}
div .inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;}