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

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

Answer 2

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

Demo Fiddle

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元素并将样式移到样式表中而不是内联。

内容坐在div的中间

2 个答案:

Demo Fiddle