首页 > 代码库 > 多种方式让你的容器水平居中
多种方式让你的容器水平居中
方法一:position加margin(兼容性:主流浏览器均支持,IE6不支持) 最容易让人理解也是最常见的一种方法
<div class="box"> <div class="center"></div> </div>
/**css**/ .box { width: 600px; height: 600px; background: #000; position: relative; .center { position: absolute; width: 100px; height: 100px; background: orange; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
另外一种margin+position
<div class="box"> <div class="center"></div> </div>
/**css**/ .box { width: 600px; height: 600px; background: #000; position: relative; .center { position: absolute; width: 100px; height: 100px; background: orange; left: 50%; top: 50%; margin-left:-50px;
margin-top:-50px;
}
方法二:position加 transform(兼容性:ie9以下不支持 transform,手机端较好。)
/* css */ .box { position: relative; background:#ccc; width: 600px; height: 600px;} .center { position: absolute; background: green; top:50%; left:50%; transform:translate(-50%,-50%); width: 100px; height: 100px; }
方法三:display:flex;margin:auto
/* css */ .box { background: yellow; width: 600px; height: 600px; display: flex; } .center { background: green; width: 100px; height: 100px; margin: auto; }
方法四:不固定宽高(IE67不支持)
.box { background: yellow; width: 600px; height: 600px; }
.content {
left:50%;
transform:translateX(-50%);
display:table-cell;//容器变单元格
vertical-align:middle;//单元格居中
}
方法五:类似于方法四
/*css*/ .box{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center; } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green; }
方法六:纯position
/* css */ .box { background: yellow; width: 200px; height: 200px; position: relative; } .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px; }
方法七:flex;align-items: center;justify-content: center
.box { background: yellow; width: 600px; height: 600px; display: flex; align-items: center; justify-content: center; } .center { background: green; width: 100px; height: 100px; }
居中的方式网上会有很多种方法,熟练其中的一两种也就够用了。
移动端建议大家使用方法四和七不固定宽高,效果还是非常不错的;
pc端的话比较建议大家用纯position因为要考虑低版本浏览器兼容问题嘛。希望对你们有所帮助!
多种方式让你的容器水平居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。