如何垂直自動居中一個div子元素？

-2

我正在尋找使用自動中心值的兩個div元素.main_h2和.first_button，這是div #demo的孩子。我嘗試使用position:relative作爲父項，position:absolute作爲子項，但無法將元素置於中心。如何垂直自動居中一個div子元素？

驗證碼：

<!doctype html> 
 
<html> 
 
    <head> 
 
    <style> 
 
     #demo { 
 
     width: 1440px; 
 
     height: 592px; 
 
     border: 0.1px solid #87509c; 
 
     background-color: #87509c; 
 
     position: relative; 
 
     } 
 
     .logo { 
 
     position: absolute; 
 
     top: 50px; 
 
     background-image: url("logo.jpg"); 
 
     width: 117px; 
 
     height: 40px; 
 
     margin-left: 210; 
 
     margin-top: 54; 
 
     } 
 
     ul { 
 
     list-style-type: none; 
 
     position: absolute; 
 
     top: 47px; 
 
     right: 10%; 
 
     } 
 
     ul, li { 
 
     float: right; 
 
     margin-left: 30px; 
 
     padding: 10px; 
 
     font-size: 12pt; 
 
     color: white; 
 
     font-family: tahoma; 
 
     } 
 
     .main_h2 { 
 
     font-size: 32.16pt; 
 
     color: white; 
 
     text-align: center; 
 
     position: absolute; 
 
     top: 235px; 
 
     left: 260px; 
 
     width: 60%; 
 
     } 
 
     .first_button { 
 
     position: absolute; 
 
     top: 381px; 
 
     left: 572px; 
 
     background-color: #eb7d4b; 
 
     color: white; 
 
     padding: 10px; 
 
     text-align: center; 
 
     font-size: 8pt; 
 
     height: 60px; 
 
     width: 283; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="demo"> 
 
    </div> 
 
    <div class="logo"> 
 
    </div> 
 
    <ul> 
 
     <li>WORK</li> 
 
     <li>WORK</li> 
 
     <li>BLOG</li> 
 
     <li>CONTACT</li> 
 
     <li>HOME</li> 
 
    </ul> 
 
    <div class="main_h2"> 
 
     Hi there! We are the new kids on the block 
 
     and we build awesome websites and mobile apps. 
 
    </div> 
 
    <button class="first_button">WORK WITH US!</button> 
 
    </body> 
 
</html>

來源

2016-04-01 Red Ali

我想有已經有數千個問題和答案在這裏在stackoverflow和一般的網絡上。看[這裏]（https://css-tricks.com/centering-in-the-unknown/）例如或[這裏]（https://philipwalton.github.io/solved-by-flexbox/demos/vertical - 中心/）爲flexbox解決方案 – michaPau

可能重複[在div中水平居中div]（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） –

嘗試是這樣的：

#demo { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 0.1px solid #87509c; 
 
    background-color: #87509c; 
 
} 
 
.header { 
 
    display: flex; 
 
} 
 
.logo { 
 
    position: relative; 
 
    top: 25px; 
 
    left: 25px; 
 
    background-image: url("logo.jpg"); 
 
    width: 117px; 
 
    height: 40px; 
 
    background-color: white; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
} 
 
ul, li { 
 
    float: right; 
 
    margin-left: 30px; 
 
    padding: 10px; 
 
    font-size: 12pt; 
 
    color: white; 
 
    font-family: tahoma; 
 
} 
 
.main_h2 { 
 
    font-size: 32.16pt; 
 
    color: white; 
 
    text-align: center; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 60%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.first_button { 
 
    position: relative; 
 
    background-color: #eb7d4b; 
 
    color: white; 
 
    padding: 10px; 
 
    text-align: center; 
 
    font-size: 8pt; 
 
    width: 283px; 
 
    transform: translate(-50%); 
 
    left: 50%; 
 
    margin-top: 10px 
 
}

<body> 
 
    <div id="demo"> 
 
     <div class="header"> 
 
      <div class="logo"> 
 
      </div> 
 
      <div> 
 
       <ul> 
 
        <li>WORK</li> 
 
        <li>WORK</li> 
 
        <li>BLOG</li> 
 
        <li>CONTACT</li> 
 
        <li>HOME</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
     <div style="height:500px;"> 
 
      <div class="main_h2"> 
 
       Hi there! We are the new kids on the block 
 
       and we build awesome websites and mobile apps. 
 
       <button class="first_button">WORK WITH US!</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2016-04-01 12:11:12 Mosquito

如何垂直自動居中一個div子元素？

回答

相關問題