內容坐在div的中間

Question

我在我的網站上使用Bootstrap 3，並且無論你如何操縱瀏覽器窗​​口等，都為每個部分創建了100％的div。我希望我的內容在所有給定時間的高度和寬度都位於其中間。

我真的在努力做到正確。

這是我的代碼：

<div id='imgDiv'>
    <div class="container" style="padding-top: 300px;">
        <a href="#imgDiv3">Smoothscroll</a>
        <center>
            <h1 style="font-size: 32px; font-weight: 300;">Header</h1></center>
        <center>

            <h2 style="font-size: 20px;font-weight: 300; padding-top: 30px;">My name</h2>           
        </center>
    </div>  
</div>


html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    font-family: 'Ubuntu', sans-serif;  
}
#imgDiv {
    position:relative;
    height:100%;
    background-color: #1ABC9C; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFF;
}

Answer 1

您需要margin auto for left and right side設置margin auto for left and right side

#imgDiv {
 margin: 0 auto;
 width:100px;
 ....
}

Answer 2

如果我明白你想要的......

演示小提琴

HTML

<div id='imgDiv'>
    <div> <a href="#imgDiv3">Smoothscroll</a>    
         <h1>Header</h1>    
         <h2>My name</h2> 
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    font-family:'Ubuntu', sans-serif;
}
#imgDiv {
    position:relative;
    height:100%;
    width:100%;
    background-color: #1ABC9C;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #FFF;
    display:table;
    text-align:center;
}
#imgDiv > div:first-child {
    display:table-cell;
    vertical-align:middle;
    width:100%;
}

您還應該刪除center元素並將樣式移動到樣式表中而不是內聯。