如何將此div垂直居中以及水平居中？

我希望div能夠垂直和水平地坐在頁面中間。我正在尋找一個CSS解決方案。我拿出了保證金和保證金，因爲他們與我擁有的頭文混爲一談。如何將此div垂直居中以及水平居中？

/* CSS */ 
 

 
.mainDiv { 
 
    background: #fff; 
 
    padding: 20px; 
 
    width: 450px; 
 
    margin: auto; 
 
    /*margin: 0px auto; 
 
    margin-top: 200px;*/ 
 
    box-shadow: 0 0 20px #333; 
 
}

<!-- HTML --> 
 

 
<div class="mainDiv" align="right"> 
 
    <h1 align="left">Firebase Web App</h1> 
 
    <textarea placeholder="Enter text here ..."></textarea> 
 
</div>

FIDDLE

https://jsfiddle.net/gy0Lr6rg/

來源

2016-11-16 caleho6

就一個詞使用height: 100%;：flexboxes。（我有機會回答這個問題給其他人） –

這可以幫助你http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-和水平？rq = 1 – Alexis

同樣的問題 - > [如何垂直中心的所有瀏覽器]（http://stackoverflow.com/questions/396145/how-to-vertically-中心-A-DIV參加的所有的瀏覽器） –

試用flexboxes：

.flex-container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
} 
 

 
.mainDiv { 
 
    background: #fff; 
 
    padding: 20px; 
 
    width: 450px; 
 
    /*margin: auto; 
 
    /*margin: 0px auto; 
 
    margin-top: 200px;*/ 
 
    box-shadow: 0 0 20px #333; 
 
}

<div class="flex-container"> 
 
    <div class="mainDiv" align="right"> 
 
     <h1 align="left">Firebase Web App</h1> 
 
     <textarea placeholder="Enter text here ..."></textarea> 
 
    </div> 
 
</div>

來源

2016-11-16 08:49:01 to7be

嘗試圍繞div與另一個div並使用height: 100%;就可以了。它在某些情況下適用於我。但它不會在jsfiddle中工作，因爲高度不夠大。您也可以嘗試在你的body標籤

來源

2016-11-16 08:49:26 jenald

.mainDiv { 
 
    background: #fff; 
 
    padding: 20px; 
 
    width: 450px; 
 
    height:150px; 
 
    margin-left: -225px; 
 
    margin-top:-75px; 
 
    /*margin: 0px auto; 
 
    margin-top: 200px;*/ 
 
    box-shadow: 0 0 20px #333; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
}

<div class="mainDiv" align="right"> 
 
    <h1 align="left">Firebase Web App</h1> 
 
    <textarea placeholder="Enter text here ..."></textarea> 
 
    </div>

來源

2016-11-16 08:51:06 Dhaarani

如何將此div垂直居中以及水平居中？

回答

相關問題