最近总是懒懒散散，每天工作忙成狗，没有时间进行总结和学习然后焦虑不安，趁着没有加班的时间将直接学习的css实现居中总结下。一直以来都懂得如何运用，但更多的是不清楚在什么情况下运用哪种，都是能够实现便完成任务了，有时候代码就变得累赘而且bug众多。
水平居中
- 针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素
注意：子元素必须不能被float影响
// html
<body>
<div class="div1">
<div class="div2">
行内水平居中
</div>
</div>
</body>
// css
.div1{
height: 200px;
width:200px;
background: red;
/* display:inline */
text-align:center;
}
.div2{
height:10px;
width:10px;
background: green;
display:inline;
}
效果如下:
- 定宽块状元素居中，满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素
// html
<body>
<div class="div1">
<div class="div2">
定宽块状水平居中
</div>
</div>
</body>
//css
.div1{
height: 200px;
width:200px;
background: red;
/* display:inline */
/* text-align:center; */
}
.div2{
/* height:10px; */
width:100px;
background: green;
/* display:inline; */
margin:0 auto;
}
效果如下：
- 不定宽块状元素居中，在工作中遇到这种情况比较多的就是分页的导航，因为页数的不确定性导致元素的宽度不确定
方法1：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
// html
<body>
<div class="div1">
<div class="div2">
不定宽块状水平居中
</div>
</div>
</body>
// css
.div1{
float:left;
position:relative;
left:50%;
clear:both;
background: red
}
.div2{
background:green;
position:relative;
left:-50%;
border: 1px solid #eee;
}
这种居中方法首先要理解position:relative这个属性，其次很多同学可能也不太明白为什么父元素要偏移50%和子元素偏移-50%，用画图形式表示一下可能大家就明白了，父元素div1偏移50%是相对于body，而子元素div2偏移-50%是相对于父元素div1.
position: relative; 相对定位。相对于其父级元素来定位。
方法2：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
方法3：将要显示的元素加入到 table 标签当中，然后为 table 标签设置margin：0 auto来实现居中； 或使用 display : table；然后设该元素margin：0 auto来实现居中。
使用table标签是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
2783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
