css如何讓浮動元素水平居中
阿新 • • 發佈：2018-12-27
對於定寬的非浮動元素我們可以在CSS中用 margin:0 auto 進行水平居中，對於不定寬的浮動元素我們也有一個常用的技巧解決它的水平居中問題。解決水平居中問題有很多種方法，下面先給大家分享一下三種方法，希望能幫助到大家。
方法一：
1、HTML 部分：
| 1 2 3 4 |
<div class="box">
<p>我是浮動的</p>
<p>我也是居中的</p>
</div>
|
2、CSS 部分：
| 1 2 3 4 5 6 7 8 9 10 |
.box{
float:left;
position:relative;left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
|
這樣看來就很簡單了吧，父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。如此簡單如此神奇。
方法二：
HTML 程式碼
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!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程式碼
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html>
<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>
|
這裡也可以多套一層的方式設定left:-50%，更合理，也可以避免一些不必要的IE BUG。舉一反三，這種float元素居中的方式其實可以延展應用到很多需要浮動元素又居中的情況。