首页 > 代码库 > css如何让浮动元素水平居中
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%;} .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="http://www.mamicode.com/#">上一页</a> </li> <li> <a href="http://www.mamicode.com/#">1</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">4</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">4</a> </li> <li> <a href="http://www.mamicode.com/#">5</a> </li> <li> <a href="http://www.mamicode.com/#">6</a> </li> <li> <a href="http://www.mamicode.com/#">下一页</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="http://www.mamicode.com/#">上一页</a> </li> <li> <a href="http://www.mamicode.com/#">1</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">4</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">2</a> </li> <li> <a href="http://www.mamicode.com/#">3</a> </li> <li> <a href="http://www.mamicode.com/#">4</a> </li> <li> <a href="http://www.mamicode.com/#">5</a> </li> <li> <a href="http://www.mamicode.com/#">6</a> </li> <li> <a href="http://www.mamicode.com/#">下一页</a> </li> </ul> </div> </div> </body> </html>
这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG。举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。
以上通过三种方法讲解了css如何让浮动元素水平居中
css如何让浮动元素水平居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。