第13题 CSS实现元素水平垂直居中的方案总结

CSS 实现元素水平垂直居中的方案总结

水平居中

  • 对于行内元素: text-align: center;
  • 对于确定宽度的块级元素:
  • 1. width 和 margin 实现。margin: 0 auto;

    2. 绝对定位和 margin-left: -width/2, 前提是父元素 position: relative

  • 对于宽度未知的块级元素
  • 1. table 标签配合 margin 左右 auto 实现水平居中。使用 table 标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右 margin 为 auto。

    2. inline-block 实现水平居中方法。display:inline-block 和 text-align:center 实现水平居中。

    3. 绝对定位+transform,translateX 可以移动本身元素的 50%。

    4. flex 布局使用 justify-content:center

垂直居中

1. 利用 line-height 实现居中,这种方法适合纯文字类

2. 通过设置父容器相对定位,子级设置绝对定位,标签通过 margin 实现自适应居中

3. 弹性布局 flex:父级设置 display:flex;子级设置 margin 为 auto 实现自适应居中

4. 父级设置相对定位,子级设置绝对定位,并且通过位移 transform 实现

5. table 布局,父级通过转换成表格形式,然后子级设置 vertical-align 实现。(需要注意的是:vertical-align:middle 使用的前提条件是内联元素以及 display 值为 table-cell 的元素)。

「点点赞赏,手留余香」

14

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 第13题 CSS实现元素水平垂直居中的方案总结

发表回复