css自适应宽度 多种方法实现宽度自适应的水平居中

宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助

当父元素和子元素都没有定义宽度的情况下实现水平居中： 

display:inline-block  
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 
HTML代码: 

复制代码

代码如下:

<div class="navbar"> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 

CSS代码: 

复制代码

代码如下:

.navbar { 
text-align:center; 
} 
.navbar ul { 
display:inline-block; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样 

复制代码

代码如下:

.navbar ul { 
*display:inline; 
*zoom:1; 
} 

position:relative  
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。 
HTML代码: 

复制代码

代码如下:

<div class="navbar"> 
<div> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 
</div> 

CSS代码: 

复制代码

代码如下:

.navbar { 
overflow:hidden; 
} 
.navbar > div { 
position:relative; 
left:50%; 
float:left; 
} 
.navbar ul { 
position:relative; 
left:-50%; 
float:left; 
} 
.navbar li { 
float:left; 
} 
.navbar li + li { 
margin-left:20px; 
} 

IE7下需要加入下列代码支持： 

复制代码

代码如下:

.navbar { 
position:relative; 
} 

display:table  
如果向使用极少的标签实现，这个方法是个不错的选择。 
HTML代码: 

复制代码

代码如下:

<ul class="navbar"> 
<li><a href="/">Home</a></li> 
… 
</ul> 

CSS代码: 

复制代码

代码如下:

.navbar { 
display:table; 
margin:0 auto; 
} 
.navbar li { 
display:table-cell; 
} 
.navbar li + li { 
padding-left:20px; 
} 

不支持IE7及一下浏览器，其他的主流浏览器都支持。 

display:inline-flex  
这个方法需要使用 flex-layout 的知识。 
HTML代码: 

复制代码

代码如下:

<div class="navbar"> 
<ul> 
<li><a href="/">Home</a></li> 
… 
</ul> 
</div> 

CSS代码: 

复制代码

代码如下:

.navbar { 
text-align:center; 
} 
.navbar > ul { 
display:-webkit-inline-box; 
display:-moz-inline-box; 
display:-ms-inline-flexbox; 
display:-webkit-inline-flex; 
display:inline-flex; 
} 
.navbar li + li { 
margin-left:20px; 
} 

使用CSS fit-content 值  
下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。 
HTML代码: 

复制代码

代码如下:

<div class="navbar center"> 
<ul> 
<li><a href="/">Home</a></li> 
<li><a href="/">About us</a></li> 
<li><a href="/">Our products</a></li> 
<li><a href="/">Customer support</a></li> 
<li><a href="/">Contact</a></li> 
</ul> 
</div> 

CSS代码: 

复制代码

代码如下:

.center ul{ 
width: -moz-fit-content; 
width: -webkit-fit-content; 
width: fit-content; 
margin: auto; 
} 

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。 
这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。 

根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。

转自：http://www.jb51.net/css/77317.html