Question

我正在尝试将div放在视口中心。

这是我到目前为止所做的事情。

HTML

<html>
    <head>
        <title>TEST</title>
    </head>
    <body>
        <div id="header">Some header stuff here.</div>
        <div id="wrapper">
            <div class="spacer"><!-- avoid overlapping of content by header --></div>
            <div id="content">Stuff to be centered horizontally and vertically.</div>
            <div footer="spacer"><!-- avoid overlapping of content by footer --></div>
        </div>
        <div id="footer">Some footer.</div>
    </body>
</html>

CSS

html, body{
    height:100%; /*Setting height to 100% in order to make min-height:100% to work on wrapper.*/
}
#header{
    height:70px;
    width:100%;
    position:fixed;
    top:0;
    left:0;
}
#wrapper{
    min-height:100%;
    width:100%;
    margin-bottom:-70px; /*Equal to footer's height*/
}
#content{
    /* Exact height is not known.*/
    width:250px;
    position:absolute;
    top:50%;
    left:50%;
    margin:0px 0px 0px -125px; /* Top margin?? */
}
#footer{
    height:70px;
    width:100%;
    position:relative;
    bottom:0;
}
div.spacer{
    height:70px;
}

现在我有两个问题。

由于身高未知，如何将div#content定位到确切的中心，因为我无法设置否定margin-top。
即使已知#content的高度且设置margin-top可能有效，只要视口的高度小于{{{1}的高度，该方法就会失败1}}因为页眉和页脚会重叠div#content。

如何解决这个问题？

Answer 1

使用css calc让#wrapper 100％的高度减去页脚和标题的高度（确保body和html的高度为100％）。在#wrapper中，您使用flexbox来显示#content居中。

＆＃13;

body, html {
    height:100%;
    margin:0;
}

header {
    background-color:orange;
    height:70px;
}

#wrapper {
    align-items:center;
    background:blue;
    display:flex;
    /* 100% minus height of both header and footer */
    height:calc(100% - (70px + 70px));
}

#content {
    background:white;
    margin:auto;
    width:250px;
}

footer {
    background-color:orange;
    height:70px;
}

＆＃13;

<header></header>
<div id='wrapper'>
    <div id='content'>Content</div>
</div>
<footer></footer>

＆＃13;

Answer 2

看看以下内容。它将div完美地放在中心。

修改应用了一些javascript，以便在页面呈现后动态定位内容。

/ *************** /

window.onload = function() { var content = document.getElementById("content"); content.style.height = content.clientHeight + "px"; content.style.position = "absolute"; };

html, body { height: 100%; /*Setting height to 100% in order to make min-height:100% to work on wrapper.*/ } #header { height: 70px; width: 100%; position: fixed; top: 0; left: 0; } #wrapper { min-height: 100%; width: 100%; margin-bottom: -70px; /*Equal to footer's height*/ } #content { position: relative; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 140px; height: auto; background: #eee; } #footer { height: 70px; width: 100%; position: relative; bottom: 0; } div.spacer { height: 70px; }

<div id="header"> Some header stuff here. </div> <div id="wrapper"> <div class="spacer">  </div> <div id="content"> Stuff to be centered horizontally and vertically. </div> <div footer="spacer">  </div> </div> <div id="footer"> Some footer. </div>

如何在视口中心显示div？

2 个答案: