垂直居中

总结归纳了几种垂直居中的方法,方便自己查阅。

1. padding

padding
使用margin原理相同,这种写法只适用于父容器没有写死height的情况。

2. table

如果用table布局,table是自带垂直居中的效果,但table布局已经过时了,因为利用table布局 违背了语义化、违背了样式与结构分离、最重要的是有更好用的div+css3布局。

  <table>
    <tr>
      <td></td>
    </tr>
  </table>

可以将div改写成table:display:table/table-row/table-cell
div=>table

3. absolute

(1): 绝对定位
(2): absolute+translate -50%
(3): absolute+margin:auto

4. before,after inline-block,height:100%

inline-block+height:100%

5. flex

flex居中

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容