Question

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

为此，我不能使用display:table，这会将div对齐在中心。我怎么能对内容进行对齐，而不必明确width？

Answer 1

您需要在flexbox布局中使用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 2

或者不使用flex，translate或绝对定位：

#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 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（）

段：

＆＃13;

     .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%); 
      }

＆＃13;

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

＆＃13;

如何在没有明确大小的情况下对齐div？

3 个答案: