css如何让浮动元素⽔平居中
对于定宽的⾮浮动元素我们可以在CSS中⽤ margin:0 auto 进⾏⽔平居中，对于不定宽的浮动元素我们也有⼀个常⽤的技巧解决它的⽔平居中问题。解决⽔平居中问题有很多种⽅法，下⾯先给⼤家分享⼀下三种⽅法，希望能帮助到⼤家。
⽅法⼀：
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%;}
html怎么让所有内容居中.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=""> <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元素居中的⽅式其实可以延展应⽤到很多需要浮动元素⼜居中的情况。
以上通过三种⽅法讲解了css如何让浮动元素⽔平居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。