Html/css 水平布局居中
如何设置水平居中显示?
一般的方法是设置宽高,然后以margin去控制,比如:DIV居中的经典方法
本章介绍需要宽度自适应时如何水平居中,以及居中失效的几个点
水平自适应居中
比如设置一个列表水平居中显示
- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
- CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
- DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
添加布局元素:
1 <div class="container"> 2 <div class="list-parentOuter"> 3 <div class="list-parentInner"> 4 <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 5 <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 6 <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 7 <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 8 </div> 9 </div> 10 </div>
水平居中设置:
- list-parentOuter设置float,将元素list-parentOuter浮动(这样设置后,元素的宽度会自适应)
- list-parentOuter设置margin-left,以父容器的宽度*50,设置左侧margin
- lsit-parentInner设置position相对位置,以满足内容的100%填充list-parentOuter
- lsit-parentInner设置right,以父容器list-parentOuter的宽度*50,设置右侧距离
1 .list-parentOuter { 2 float: left; 3 margin-left: 50%; 4 } 5 .list-parentInner { 6 position: relative; 7 right: 50%; 8 }
我们添加点背景颜色,效果如下:
如上图,红色框先往右移50%绿色框的宽度,然后左移50%蓝色框的宽度。
完整html及css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .container { 8 width:600px; 9 height:300px; 10 background: green; 11 } 12 .list-parentOuter { 13 float: left; 14 margin-left: 50%; 15 background: rgb(0, 0, 255,0.5); 16 } 17 .list-parentInner { 18 position: relative; 19 right: 50%; 20 background: rgb(255, 0, 0,0.5); 21 display: flex; 22 flex-direction: column; 23 } 24 </style> 25 26 </head> 27 <body> 28 <body> 29 <div class="container"> 30 <div class="list-parentOuter"> 31 <div class="list-parentInner"> 32 <div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div> 33 <div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div> 34 <div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div> 35 <div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div> 36 </div> 37 </div> 38 </div> 39 </body> 40 </body> 41 </html>
注:以上水平居中的方案,会有一段右侧区域(蓝框部分)超出预定的宽度。可以在添加overflow:hidden隐藏溢出部分
水平居中错误操作及总结
在以上css中上方容器container的样式,添加以下flex布局代码:
1 .container { 2 width:600px; 3 height:300px; 4 display: flex; 5 flex-direction: column; 6 background: green; 7 }
里面的内容还能够居中么?效果如下:
如果是宽度1000,则是这样:
原因:
flex布局时,子元素不会再自适应宽度(即使设置了float=left);
然后设置设置竖向布局方向,flex-direction: column,会将蓝框的宽度截了(flex-direction: column,会将超出的宽度截取)。
所以红框去获取父容器蓝框的宽度时,只能获取被截图的宽度。
红框在绿框内虽然元素是居中的,但是内容就不居中了。
所以如果需要内容居中,不要在蓝框的上方容器内添加flex布局相关代码。
总结
外层
- 外层的父容器,不能会截取外层宽度的代码(比如flex竖向布局)
- 外层需要设置float=left或者positon=absolute,以让外层的宽度自适应内层的宽度。
- 外层以其父容器的50%宽度,向右移动距离,方便后续居中设置
内层
- 内层的宽度,需要100%填充外层容器的。
- 通过设置相对位置,以外层50%宽度设置远离外层右侧。
作者:唐宋元明清2188
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。