如何在视口中心显示一个div？

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 可能有效，只要视口的高度小于 [= 的高度，该方法就会失败14=] 因为页眉和页脚会重叠 #content.

如何解决这个问题？

Answer 1

看看下面的内容。它使 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">
    <!-- 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>

Answer 2

使用 css calc to have the height of your #wrapper 100% minus the height of your footer and header (make sure you body and html have a height of 100%). In that #wrapper you use flexbox 显示您的 #content 居中。

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;
}

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

如何在视口中心显示一个div？

How to display a div at the center of viewport?

html

css

css-position