如何使用相对定位垂直居中一个 div 元素？

发布日期： 2024-11-03 阅读量： 作者： 网络

相对定位无法上下居中

给定一个

元素，使用 position: relative 样式。尽管 left 和 right 属性可以左右居中元素，但 top 和 bottom 属性却无法垂直居中它。

问题原因：

与 absolute 和 fixed 定位不同，relative 定位元素相对于自身定位，而不是相对于一个外部容器。当使用 top 和 bottom 属性时，元素将根据自身顶部和底部进行偏移，而不是相对于其父级容器。

解决方案：

要解决此问题，可以使用以下方法之一：

将父级元素的 position 属性设置为 absolute 或 fixed，然后使用 margin: auto 垂直居中元素。
将元素的 top 和 bottom 属性同时设置为 50%，然后使用 transform: translate(-50%, -50%) 将元素向左和向上移动 50%，使其在父级元素内居中。

随便看看