子绝父相水平居中及水平垂直都居中解决方法

原图:

水平居中操作步骤:

1.先让子盒子往右移动父盒子的一半

left:50%

2.再让子盒子往左移动自己的一半

  • 普通做法:
    margin-left: 负的子盒子宽度的一半

    缺点:子盒子宽度变化后需要重新改代码

  • 优化做法:
    transform:translateX(-50%)

    优点:表示沿着X轴的负方向(往左)始终移动自己宽度的一半,子盒子宽度变化不想要更改代码。

水平居中后显示效果:

水平垂直居中操作步骤:

1.先让子盒子往右往下移动父盒子的一半

 left: 50%;
 top: 50%;

2.再让盒子往左往上移动自己的一半,必须采用连写形式。

transform: translate(-50%, -50%);

水平垂直居中显示效果:

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

老阿姨的碎碎念1

2021-11-26 16:09:36

知识碎片

CSS中元素的层级问题及更改定位元素的层级方法

2021-11-26 21:55:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧