快捷導(dǎo)航

css如何讓浮動元素水平居中

更新時間：2015年08月07日 15:25:53 投稿：mrr

css中對于定寬的非浮動元素用margin:0 auto進(jìn)行水平居中，對于不定寬的浮動元素也有一個常用技巧，這篇文章就給大家介紹下css如何讓浮動元素水平居中，需要的朋友可以來學(xué)習(xí)下

對于定寬的非浮動元素我們可以在CSS中用 margin:0 auto 進(jìn)行水平居中，對于不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。解決水平居中問題有很多種方法，下面先給大家分享一下三種方法，希望能幫助到大家。

方法一：

1、HTML 部分：

<div class="box">
 <p>我是浮動的</p>
 <p>我也是居中的</p>
</div>

2、CSS 部分：

.box{
 float:left;
 position:relative;
 left:50%;
}
p{
 float:left;
 position:relative;
 right:50%;
}

這樣看來就很簡單了吧，父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。如此簡單如此神奇。

方法二：

HTML 代碼

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>頁面浮動元素的水平居中</title>
<style type="text/css">
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
 .clearfix { zoom:1; }
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
 .inwrap{ float:left; position:relative; left:50%;}
 .page { float:left; position:relative; left:-50%; }
 .page li { float:left;margin:0 5px; }
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<div class="wrap clearfix">
 <div class="inwrap">
 <ul class="page">
  <li> <a href="#">上一頁</a> </li>
  <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="#">2</a> </li>
  <li> <a href="#">3</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>
  <li> <a href="#">6</a> </li>
  <li> <a href="#">下一頁</a> </li>
 </ul>
 </div>
</div>
</body>
</html>

父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。

方法三：

html代碼

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>頁面元素的水平居中</title> 
<style type="text/css"> 
 * { margin:0; padding:0; list-style:none; font-size:14px; } 
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; } 
 .clearfix { zoom:1; } 
 a{ text-decoration:none;} 
 h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;} 
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; } 
 .inwrap{ float:left; position:relative; left:50%;} 
 .page { float:left; position:relative; left:-50%; } 
 .page li { float:left;margin:0 5px; } 
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;} 
</style> 
</head> 
<body> 
<h1>頁面元素的水平居中</h1> 
<h2>浮動方式：</h2> 
<div class="wrap clearfix"> 
 <div class="inwrap"> 
 <ul class="page"> 
  <li> <a href="#">上一頁</a> </li> 
  <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="#">2</a> </li> 
  <li> <a href="#">3</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> 
  <li> <a href="#">6</a> </li> 
  <li> <a href="#">下一頁</a> </li> 
 </ul> 
 </div> 
</div> 
</body> 
</html>

這里也可以多套一層的方式設(shè)置left:-50%，更合理，也可以避免一些不必要的IE BUG。舉一反三，這種float元素居中的方式其實可以延展應(yīng)用到很多需要浮動元素又居中的情況。

以上通過三種方法講解了css如何讓浮動元素水平居中，后續(xù)本網(wǎng)站還會持續(xù)更新有關(guān)js、jq、css、php、c#等編程方面的知識，敬請關(guān)注本站，謝謝。

您可能感興趣的文章: