有时我们需要将一个元素置于相对于其在 HTML 中最近定位的祖先的中心绝对位置,以使其看起来更易于展示。为了使 div 中的绝对定位元素居中,我们使用以下示例:
示例 1:
HTML
html
Centering an abosulte positioned
element inside a div both
horizontally and vertically
输出:
说明:这里,left 被赋予 50% 以将其放置在水平中心。 Transform 用于将项目的一半宽度拉回,使其恰好位于元素中间的中心。 left: 50% 是相对于父元素的,而平移变换是相对于元素的宽度/高度。
示例 2:
html
Centering an abosulte positioned
element inside a div both
horizontally and vertically
输出:
说明:这里 left 和 top 各占 50% 以将其水平和垂直放置在中心。 Transform 用于将项目的一半宽度拉回,使其恰好位于元素中间的中心。因此, translate:translate为水平和垂直提供 -50% 以进行集中调整。