css - 在绝对定位的 div 中居中 div

Question

我有两个 div，一个在另一个里面。外部 div 的宽度以百分比形式给出，内部 div 以position:absolute. 我想将内部 div 与外部 div 的中心对齐，而不管外部 div 的宽度百分比如何。

从内部 div 中删除时它工作正常position:absolute，但我需要它。任何帮助将不胜感激。

我有以下代码：

<div class='container' style='width:70%; position:relative'>
   <div style='position:absolute; text-align:center' align='center'>
        //contents
   </div>
</div>

Answer 1

您可以执行以下操作：

1. 添加text-align:center到.containerdiv：

   .container{
       text-align:center;
   }
   

2. 如果您尝试将另一个 div 或图像等居中，.container则将这些项目设置为具有以下内容margin:0 auto;，例如

   .container > div{
       margin: 0 auto;
       /* note that div needs to be a block element and needs a given width */
   }
   

这应该有助于解决您的问题。