如何在视口中心显示 div？ [复制]答案

【问题标题】：How to display a div at the center of viewport? [duplicate]如何在视口中心显示 div？ [复制]
【发布时间】：2015-02-15 03:34:18
【问题描述】：

我正在尝试将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

如何解决这个问题？

【问题讨论】：

css-tricks.com/centering-css-complete-guide
你可以看看这个链接stackoverflow.com/questions/659677/…

标签： html css css-position

【解决方案1】：

使用 css calc 将 #wrapper 的高度减去页脚和页眉的高度 100%（确保 body 和 html 的高度为 100%）。在 #wrapper 中，您使用 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>

【讨论】：

【解决方案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">
    <!-- 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>

【讨论】：

我不确定它如何解决我的第二个问题？避免重叠？
是的，刚刚尝试过。您的解决方案不适用于未知高度。相反，它会拉伸孩子以匹配父母的身高。
你所寻求的功能不能用纯 CSS 来完成。由于您的身高是动态的，因此您还需要动态响应。这可以用一点 javascript 来完成。我已经调整了答案，使其以这种方式响应。
+1 但无法将其标记为已接受，因为如果我想使用 Javascript，我不会在 SO 上发布此内容，因为我已经运行了 JS 版本。 :)