1.水平居中
(1) 文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
(2) 确定宽度的块级元素的水平居中
通过设置margin-left:auto;和margin-right:auto;来实现的。
(3) 不确定宽度的块级元素的水平居中
方法一:
使用table标签,table本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!
将需要居中的部分包含在table标签内,对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中,间接使需要居中的部分水平居中。
缺点:增加了无语意标签,加深了标签的嵌套层数。
<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
.wrap{ width:500px; height:100px;}
table{margin-left:auto;margin-right:auto;}
.test li{float:left; display:inline; margin-right:5px;}
</style>
<div class="wrap">
<table>
<tbody>
<tr>
<td>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
方法二:
改变块级元素display为inline类型,然后使用text-align:center来实现居中。
较方法一,好处是不用增加无语义标签,简化了标签的嵌套深度。坏处,将块级元素的display类型改为inline,缺少了一些块级元素的功能,比如高宽。
<style>
.wrap{ width:500px; heighe:100px;}
.test{text-align:center; padding:5px;}
.test li{display:inline;}
</style>
<div class="wrap">
<ul class="test">
<li>1</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
方法三:
通过给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置了position:relative,带来一定的副作用。
<style type="text/css"> ul{ list-style:none; margin:0; padding:0;} .wrap{ background:#000; width:500px; height:100px;} .test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;} .test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;} .test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;} </style> <div class="wrap"> <ul class="test"> <li><a href="#">1</a></li> </ul> <ul class="test"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <ul class="test"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div>
当父元素和子元素都没有定义宽度的情况下实现水平居中:
display:inline-block
可以使用text-align:center和display:inline-block相结合,这个技巧需要一个父元素。
HTML代码:
1 <div class="navbar"> 2 <ul> 3 <li><a href="/">Home</a></li> 4 … 5 </ul> 6 </div>
CSS代码:
1 .navbar {
2 text-align:center;
3 } 4 .navbar ul { 5 display:inline-block; 6 } 7 .navbar li { 8 float:left; 9 } 10 .navbar li + li { 11 margin-left:20px; 12 }
IE系列IE8+支持,要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样
1 .navbar ul {
2 *display:inline;
3 *zoom:1; 4 }
position:relative
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系,这个技巧需要两个父元素,一个用来定位而另外一个用来避免出现滚动条。
HTML代码:
1 <div class="navbar">
2 <div>
3 <ul> 4 <li><a href="/">Home</a></li> 5 … 6 </ul> 7 </div> 8 </div>
CSS代码:
1 .navbar {
2 overflow:hidden;
3 } 4 .navbar > div { 5 position:relative; 6 left:50%; 7 float:left; 8 } 9 .navbar ul { 10 position:relative; 11 left:-50%; 12 float:left; 13 } 14 .navbar li { 15 float:left; 16 } 17 .navbar li + li { 18 margin-left:20px; 19 }
IE7下需要加入下列代码支持:
1 .navbar {
2 position:relative;
3 }
display:table
如果向使用极少的标签实现,这个方法是个不错的选择。
HTML代码:
1 <ul class="navbar">
2 <li><a href="/">Home</a></li>
3 … 4 </ul>
CSS代码:
1 .navbar {
2 display:table;
3 margin:0 auto; 4 } 5 .navbar li { 6 display:table-cell; 7 } 8 .navbar li + li { 9 padding-left:20px; 10 }
不支持IE7及一下浏览器,其他的主流浏览器都支持。
display:inline-flex
这个方法需要使用 flex-layout 的知识。
HTML代码:
1 <div class="navbar">
2 <ul>
3 <li><a href="/">Home</a></li> 4 … 5 </ul> 6 </div>
CSS代码:
1 .navbar {
2 text-align:center;
3 } 4 .navbar > ul { 5 display:-webkit-inline-box; 6 display:-moz-inline-box; 7 display:-ms-inline-flexbox; 8 display:-webkit-inline-flex; 9 display:inline-flex; 10 } 11 .navbar li + li { 12 margin-left:20px; 13 }
使用CSS fit-content 值
下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。
HTML代码:
1 <div class="navbar center">
2 <ul>
3 <li><a href="/">Home</a></li> 4 <li><a href="/">About us</a></li> 5 <li><a href="/">Our products</a></li> 6 <li><a href="/">Customer support</a></li> 7 <li><a href="/">Contact</a></li> 8 </ul> 9 </div>
CSS代码:
1 .center ul{
2 width: -moz-fit-content;
3 width: -webkit-fit-content; 4 width: fit-content; 5 margin: auto; 6 }
浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。
这个方式是推动浏览器发展的一个新的东西,目前供应于所以可以写前缀的浏览器,并没有工作在IE9和IE9以下。
根据你的需求来选择合适的方法吧,display:inline-block兼容性较好,flex-box将会用于未来。
2.垂直居中
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下边距实现的,即设置padding-top和padding-bottom。
(2)父元素高度确定的单行文本的垂直居中
通过给父元素设置line-height来实现,line-height值和父元素高度值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
CSS中有一个用于垂直居中的属性vertical-align,但只有当父元素为td或者th时,这个属性才生效,对于其他块级元素,如div,p等,默认情况下是不支持vertical-align属性的。在firefox和ie8下,可以设置块级元素的display:table-cell来激活vertical-align属性,但ie6和ie7并不支持display:table-cell。
方法一:
直接使用table,因为td标签默认下就隐式设置了vertical-align:middle。
方法二:
对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中,对不支持display:table-cell的ie6和ie7,使用特定格式的hack。
<style type="text/css"> .mb10{margin-bottom:10px;} .wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;} .test{width:200px;height:50px;background:#f00;} .verticalWrap{*position:absolute;*top:50%;} .vertical{*position:relative;*top:-50%;} </style> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="vertical"> hello world<br /> hello world<br /> hello world </div> </div> </div> </div> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <img src="" class="vertical" /> </div> </div> </div> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="test vertical"></div> </div> </div> </div>