如何使用 CSS 将 div 中绝对定位的元素居中？

有时我们需要将一个元素置于相对于其在 HTML 中最近定位的祖先的中心绝对位置，以使其看起来更易于展示。为了使 div 中的绝对定位元素居中，我们使用以下示例：
示例 1：

HTML

输出：

说明：这里，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% 以进行集中调整。