第一种:inline 元素
第二种:block 元素
- inline 元素的等内边距,上下两边的内边距相等,则中间内容居中,demo 传送门:http://codepen.io/StevenYuysy/pen/grqPvj<img src="https://pic1.zhimg.com/50/1089bd28a59bfffdb09aeaf1c3d43e8c_hd.jpg" data-rawwidth="422" data-rawheight="279" class="origin_image zh-lightbox-thumb" width="422" data-original="https://pic1.zhimg.com/1089bd28a59bfffdb09aeaf1c3d43e8c_r.jpg">
- inline 元素的行高,行高与容器高度相等,则中间内容居中,demo 传送门:http://codepen.io/StevenYuysy/pen/vGbLrR<img src="https://pic1.zhimg.com/50/69ad247cebcdfb6105fb225079d8c350_hd.jpg" data-rawwidth="437" data-rawheight="346" class="origin_image zh-lightbox-thumb" width="437" data-original="https://pic1.zhimg.com/69ad247cebcdfb6105fb225079d8c350_r.jpg">
- 如果上面的代码都不生效的话,有可能行内元素是在表格里面,这个时候可以利用inline元素的 CSS 属性 vertical-align ,默认是 baseline 属性,将其设置为 middle,这个属性常用于 inline-level 和 table-cell 的元素。 demo传送门:inline_vertical_demo_3<img src="https://pic3.zhimg.com/50/274ea3309217321ab5e8ae35b8022eb0_hd.jpg" data-rawwidth="429" data-rawheight="338" class="origin_image zh-lightbox-thumb" width="429" data-original="https://pic3.zhimg.com/274ea3309217321ab5e8ae35b8022eb0_r.jpg">
第二种:block 元素
- block 元素利用绝对定位以及负外边距,适用于知道元素的宽度和高度,兼容性好,所以会看到很多远古时代的居中都采用这种办法,参照下图,注意这里的外边距减去的是 block 元素宽度的一半,即
margin:-(width/2) px
- block 元素利用绝对定位以及 transform ,适用于不知道元素的宽度盒高度,参照下图 <img src="https://pic4.zhimg.com/50/21cc6a5443cd959f2e1c966bdd9aa79f_hd.jpg" data-rawwidth="511" data-rawheight="275" class="origin_image zh-lightbox-thumb" width="511" data-original="https://pic4.zhimg.com/21cc6a5443cd959f2e1c966bdd9aa79f_r.jpg">
- block 元素在外部的容器,利用 flex 的属性将其设置为下图,则子元素 block 元素垂直居中<img src="https://pic4.zhimg.com/50/a310965198b80c8a23226e5cf3b46c07_hd.jpg" data-rawwidth="518" data-rawheight="188" class="origin_image zh-lightbox-thumb" width="518" data-original="https://pic4.zhimg.com/a310965198b80c8a23226e5cf3b46c07_r.jpg">
水平垂直居中- 在垂直居中的基础上,block 元素的三种方法均能演变为水平垂直居中,前两种只需增加 left 属性以及 margin-left 或者 transformX 当中的一个属性达到目的
- 利用 flex 的话,添加多一个 align-items:center 即可
- 利用上面三种方法实现的水平居中 demo 传送门:
- IFE task1_4_1
- IFE task1_4_2
- IFE task1_4_3