Question

我一直在使用一个跨越100％高和100％宽的div，无论浏览器窗口大小或屏幕尺寸如何，内容应始终固定在中间，但出于某些奇怪的原因（可能是因为它已经是漫长的一天）我似乎无法找到问题，为什么内容位于页面顶部，不是在中间，而是从上到下不同中心？

body{
font-family: 'Open Sans', sans-serif;
color: #FFF;
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
background-color: #1abc9c;  
}

#imgDiv {
position:relative;
height:100%;
width:100%;
background-color: #1abc9c;
color: #FFF;
display:table;
text-align:Center;
}

#imgDiv div {
display:table-cell;
vertical-align:middle;
width:100%;
}

<div id='imgDiv'>
        <h1>
            <img src="img/#.png" style="width: 15%;" />
        </h1>


        <h2>
        <a href="http://www.#.co.uk/" target="_blank">Link</a>
        </h2>



        <center>
            <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a>
            <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a>
            <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a>
            <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a>
        </center>   
</div>

这是我的Fiddle

Answer 1

查看 this fiddle 。您走在正确的轨道上，但您需要在imgDiv

周围添加容器div

HTML

<div id="Container">
    <div id='imgDiv'>
        <h1>
            <img src="img/#.png" style="width: 15%;" />
        </h1>

        <h2>
            <a href="http://www.#.co.uk/" target="_blank">Link</a>
        </h2>

        <center>
            <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a>
            <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a>
            <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a>
            <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a>
        </center>   
    </div>
</div>

<强> CSS

html, body{
font-family: 'Open Sans', sans-serif;
color: #FFF;
height:100%;
width:100%;
margin:0;
padding:0;
background-color: #1abc9c;  
}

#imgDiv {
height:100%;
width:100%;
background-color: #1abc9c;
color: #FFF;
text-align:center;
display:table-cell;
vertical-align:middle;
}

#Container{
    display: table;
    height: 100%;
    width: 100%;
}

Answer 2

一般来说，height: 100%在应用于DIV时，在大多数浏览器中都不会像您期望的那样工作。

对于我能想到的，你有几个选择。

1）使用表格来形成布局。 height: 100% 确实可以正常使用，但使用表格进行布局通常不赞成（尽管仍然是功能选项）。

2）你可以将imgDiv包裹在一系列其他DIV中，分别应用样式display: table和display: table-cell，然后让单元格DIV为vertical-align: middle但老实说，如果你要这样做，我只需要使用＃1并使用实际的表格。 注意：这并不适用于所有浏览器。

3）你可以将这些样式应用到你的DIV：position:absolute; top:50%; height:400px; margin-top:-200px;这将使你的DIV位于页面的中间位置，并给它一个高度为负半边的边缘 - 你最终会得到在页面中间的DIV中间。当然，您可以根据自己的喜好在适当的位置玩高度和边距。

Div不在请求时居中于页面

2 个答案: