居中的內容在一個居中的div

我有一個div裏面有內容的div（內容是動態創建的）我已經讓子div垂直居中，但不能垂直居中居中。我正在使用Bootstrap。居中的內容在一個居中的div

.main { 
 
    position: relative; 
 
    min-height: 600px; 
 
    width: 100%; 
 
    margin: 0; padding: 0; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin: auto; 
 
    max-width: 60%; 
 
    top: 50%; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    transform: translateY(-50%) 
 
} 
 

 
#content p { 
 
    position: relative; 
 
    font-weight: 500; 
 
    font-size: 3.5em; 
 
    line-height: 1.25em; 
 
    color: #fff; 
 
}

<div class="row"> 
 
    <div class="main"> 
 
    <div id="content"> \t \t \t \t 
 
     <p> text content </p> (this is inputted by Wordpress/post) 
 
    </div> 
 
    </div> \t 
 
</div>

來源

2016-06-27 user3550879

你可以只計算（50％ - （div/2的高度）） –

什麼決定'＃content'的高度？ –

沒有什麼東西可以確定它的內容是否放在裏面 – user3550879

您可以使用Flexbox的：

.main { 
 
    min-height: 300px; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#content { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#content p { 
 
    color: white; 
 
}

<div class="row"> 
 
    <div class="main" style=""> 
 
     <div id="content">    
 
      <p> text content </p> 
 
     </div> 
 
    </div>  
 
</div>

來源

2016-06-27 00:59:51

這就是我現在遇到的問題，子div是居中的，但是內容不是 – user3550879

@ user3550879你是否想要垂直居中？ –

@ user3550879檢查更新後的答案。 –

嘗試添加樣式這樣的事情，引導不具備那樣的功能，它由用戶做的工作。

.center { 
    margin: auto; 
    height: 65%; 
}

希望這有助於

來源

2016-06-27 00:59:01 Fil

更好的解決辦法總是會使用哪個出來，在CSS3盒子Flexbox的。

只需使用下面的類：

#content p { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    font-weight: 500; 
    font-size: 3.5em; 
    line-height: 1.25em; 
    color: #000; 
}

另外，

你可以把類的「主」的最小高度爲150％，而不是600像素。

.main { 
     position: relative; 
     min-height: 150%; 
     width: 100%; 
     margin: 0; padding: 0; 
    }

這將是最簡單的解決方案。

來源

2016-06-27 00:59:57 zubair1024

這將文本放在頂部的div和頁面頂部的div不在中心 – user3550879

你說得對。我已更正解決方案。 – zubair1024

居中的內容在一個居中的div

回答

相關問題