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

📅  最后修改于: 2021-11-07 09:06:03             🧑  作者: Mango

有时我们需要将一个元素置于相对于其在 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% 以进行集中调整。