如何對齊沒有顯式大小居中的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>