絶対配置のDivで中央揃え

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

divは一番上にありますが、<center>またはで中央揃えすることはできませんmargin: 0 auto。

div次のように固定幅を指定すると、問題が解決することがあります。

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

パーティーに遅れることはわかっていますが、絶対的な幅を正確に知らない場合に、絶対的なアイテムを水平方向に配置する必要がある人々のために、ここで答えを提供しようと思いました。

これを試して：

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

同じ手法は、次のようにプロパティを調整するだけで、垂直方向の配置が必要になる可能性がある場合にも適用できます。

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

垂直方向と水平方向の両方で中央に配置するには、次のようにします。

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

相対的な幅（パーセンテージ）が必要な場合は、絶対位置のdivでdivをラップできます。

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

要素を絶対的に配置するには、親要素を相対的に配置する必要があることに注意してください。

私は同じ問題を抱えていました、そして私の制限は私が事前に定義された幅を持つことができないということでした。要素の幅が固定されていない場合は、これを試してください

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

次に、htmlを次のように変更します

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

または、相対単位を使用することもできます。

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

はい：

div#thing { text-align:center; }