Html/css 水平布局居中
如何设置水平居中显示？
一般的方法是设置宽高，然后以margin去控制，比如：DIV居中的经典方法
本章介绍需要宽度自适应时如何水平居中，以及居中失效的几个点
水平自适应居中
比如设置一个列表水平居中显示
- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
- BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
- CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
- DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
添加布局元素：
<div class="container">
<div class="list-parentOuter">
<div class="list-parentInner">
<div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</div>
</div>
</div>水平居中设置：
- list-parentOuter设置float，将元素list-parentOuter浮动（这样设置后，元素的宽度会自适应）
- list-parentOuter设置margin-left，以父容器的宽度*50，设置左侧margin
- lsit-parentInner设置position相对位置，以满足内容的100%填充list-parentOuter
- lsit-parentInner设置right，以父容器list-parentOuter的宽度*50，设置右侧距离
.list-parentOuter {
float: left;
margin-left: 50%;
}
.list-parentInner {
position: relative;
right: 50%;
}我们添加点背景颜色，效果如下：
如上图，红色框先往右移50%绿色框的宽度，然后左移50%蓝色框的宽度。
完整html及css：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
width:600px;
height:300px;
background: green;
}
.list-parentOuter {
float: left;
margin-left: 50%;
background: rgb(0, 0, 255,0.5);
}
.list-parentInner {
position: relative;
right: 50%;
background: rgb(255, 0, 0,0.5);
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<body>
<div class="container">
<div class="list-parentOuter">
<div class="list-parentInner">
<div class="item">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div class="item">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div class="item">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
<div class="item">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</div>
</div>
</div>
</body>
</body>
</html>水平居中错误操作及总结
在以上css中上方容器container的样式，添加以下flex布局代码：
.container {
width:600px;
height:300px;
display: flex;
flex-direction: column;
background: green;
}里面的内容还能够居中么？效果如下：
如果是宽度1000，则是这样：
原因：
flex布局时，子元素不会再自适应宽度（即使设置了float=left）；
然后设置设置竖向布局方向，flex-direction: column，会将蓝框的宽度截了（flex-direction: column，会将超出的宽度截取）。
所以红框去获取父容器蓝框的宽度时，只能获取被截图的宽度。
红框在绿框内虽然元素是居中的，但是内容就不居中了。
所以如果需要内容居中，不要在蓝框的上方容器内添加flex布局相关代码。
总结
外层
- 外层的父容器，不能会截取外层宽度的代码（比如flex竖向布局）
- 外层需要设置float=left或者positon=absolute，以让外层的宽度自适应内层的宽度。
- 外层以其父容器的50%宽度，向右移动距离，方便后续居中设置
内层
- 内层的宽度，需要100%填充外层容器的。
- 通过设置相对位置，以外层50%宽度设置远离外层右侧。
相关推荐
多读书读好书 2020-11-03
qiupu 2020-11-04
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18