1.行内元素:这个比较简单,一般使用text-align:center就可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
text-align:center;
background-color:#ddd;
border: 1px solid red;
}
</style>
<body>
<div id="div1">
行内居中
</div>
</body>
</html>
2.块级元素。
- 如果是定宽的那很简单,用margin:0 auto;就可以。其实就是把左右外边距设置为自动,而上下外边距随意。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div1{
width:200px;
margin:0 auto;
border:1px solid red;
}
</style>
<body>
<div id="div1">
块居中11111111
</div>
</body>
</html>
- 如果是不定宽的,有几种方法。
(1)将元素用table标签框起来。注意要有tr td ,然后用margin。。。(这是因为table的一个宽度自适应性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
table{
margin:0 auto;
}
#div1{
border: 1px solid red;
}
</style>
<body>
<table>
<tr><td>
<div id="div1">
块居中1111
</div>
</td></tr>
</table>
</body>
</html>
(2)和第一种类似,将元素设置为display:table ,然后用margin。。。。
不过要注意的是它不兼容ie8以下的版本
#div1{
border: 1px solid red;
display: table;
margin:0 auto;
}
(3)用display:inline ,然后在外面框一个元素,设置text-align:center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div0{
text-align: center;
}
#div1{
display: inline;
border:1px solid red;
}
</style>
<body>
<div id="div0">
<div id="div1">
块居中111
</div>
</div>
</body>
</html>
(4)用position去定位。可以在父元素设置 position:relative;float:left;left:50%,然后给子元素设置position:relative;left:-50%。这个很好理解,如果父元素left:50%,那么父元素的开始会距离左边50%的距离(相对原来),然后把子元素向左移动父元素一半距离(这里也就相当于移动自身50%的距离),那么相对原来就是居中了!
~(≧▽≦)/~
嘛,这里要注意的是要设置浮动。如果不设置浮动,那么它的宽度就是原来默认的宽度(一般就是屏幕的内容长度–不定);而设置浮动之后,如果不设置宽度,那么它会尽可能的窄(也就是适应内容的宽度了),就会在后来达到类似定宽的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#div0{
float: left;/*重要*/
position: relative;
left:50%;
border:1px solid yellow;
}
#div1{
position:relative;
left:-50%;
border:1px solid red;
}
</style>
<body>
<div id="div0">
<div id="div1">
块居中11111111111111111111111111111
</div>
</div>
</body>
</html>
6.26补充,用css3的transform的translate属性也可以实现水平垂直居中,它需要与position合用。
例如:
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%);
transform:translate(-50%);
}