如何对齐没有显式大小居中的div？

Question

我想要在页面中水平居中对齐div。该div包含多个html内容，如图像，链接，文本等。

为了它，我不能使用display:table，它将div对齐在中心。我怎么才能对齐内容，而不必给出明确的width？

Answer 1

使用或不使用柔性，翻译或绝对定位：

#container { 
 
    text-align:center; 
 
} 
 

 
#center { 
 
    padding:20px; 
 
    display:inline-block; 
 
    background:#ccc; 
 
}

<div id="container"> 
 
    <div id="center"> 
 
     this is a test 
 
    </div> 
 
</div>

Answer 2

您需要在弹性盒布局中使用justify-content: center。无需设置宽度。

.center { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="center"> 
 
    <img src="http://placehold.it/300x300"> 
 
    <span class="text">Test text</span> 
 
    <a href="#">Test link</a> 
 
</div>

Answer 3

您可以水平和垂直方向（你喜欢）与中间部位那么容易，不知道宽度或高度：

<div class="parent"> 
    <div class="center"> 
    Centered 
    </div> 
</div> 

CSS

.parent { 
     position: relative; 
} 
.center { 
     position: absolute; 
     left:50%; 
     transform: translateX(-50%); 
     -webkit-transform: translateX(-50%); 
    } 

垂直居中使用translateY（）

段：

 .parent { 
 
      position: relative; 
 
      width: 100%; 
 
      height: 500px; 
 
     border: 1px solid black; 
 
    } 
 
    .center { 
 
      height: 240px; 
 
      position: absolute; 
 
      left:50%; 
 
      top: 50%; 
 
      transform: translate(-50%, -50%); 
 
      -webkit-transform: translate(-50%, -50%); 
 
     }

 <div class="parent"> 
 
     <div class="center"> 
 
     Centered 
 
     </div> 
 
    </div>