最近总是懒懒散散,每天工作忙成狗,没有时间进行总结和学习然后焦虑不安,趁着没有加班的时间将直接学习的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的方法,使其水平居中。