在全屏 div 中垂直和水平居中 div答案

【问题标题】：Center div vertically and horizontally in fullscreen div在全屏 div 中垂直和水平居中 div
【发布时间】：2014-11-22 15:30:25
【问题描述】：

我在另一个全屏 div 中垂直和水平居中 div 时遇到问题。子 div 的宽度和高度是固定的。

代码如下：

html, body {
  height: 100%;
  margin: 0;
}
#header { 
  overflow: hidden;
  width:100%;
  height: 100%;

  background: orange;
  background-size:cover;
  -webkit-background-size:cover;

  display: table;
} 
#wrap {
  height: 200px;
  width: 500px;
  background:white;
  margin:0px auto;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

【问题讨论】：

Best way to center a <div> on a page vertically and horizontally?的可能重复

标签： html center

【解决方案1】：

你可以试试绝对居中：

#wrap {
  /* Absolute centering: */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;

  /* It needs a height and a width: */
  height: 200px;
  width: 500px;
}

html, body {
  height: 100%;
  margin: 0;
}
#header { 
  overflow: hidden;
  width:100%;
  height: 100%;
  background: orange;
  background-size:cover;
  -webkit-background-size:cover;
  display: table;
} 

#wrap {
  height: 200px;
  width: 500px;
  background:white;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

【讨论】：

【解决方案2】：

只需像这样更改您的 CSS：

html, body {
    width:100%;
    height: 100%;
    margin: 0;
}
#header {
    overflow: hidden;
    width:100%;
    height: 100%;
    background: orange;
    background-size:cover;
    -webkit-background-size:cover;
}
#wrap {
    height: 200px;
    width: 500px;
    background:white;
    margin:0px auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-250px;
}

html, body {
  width:100%;
  height: 100%;
  margin: 0;
}
#header {
  overflow: hidden;
  width:100%;
  height: 100%;
  background: orange;
  background-size:cover;
  -webkit-background-size:cover;
}
#wrap {
  height: 200px;
  width: 500px;
  background:white;
  margin:0px auto;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-250px;
}

<div id="header">
  <div id="wrap">
    <h1>Header</h1>
    <div id="some-text">Some text some text some text some text</div>
  </div>
</div>

See fiddle here

说明：

当使用固定宽度元素时，这是使用 CSS 绝对居中元素的最常见和最古老的方法之一。它只是将position:absolute 应用于元素以及顶部和左侧50% 值。虽然这听起来它应该自己工作，但元素有它自己的属性，例如宽度和高度，所以我们需要应用一个等于元素一半大小的margin-left 和margin-top（在这个特定的大小写，100px 和 250px)

【讨论】：

你能解释一下吗？
是的，请参阅编辑，尽管这是一种非常知名且常见的方法，我不认为你向其他人寻求解释，你去吧
这种方法在浏览器窗口小于 200x500 的情况下会出现问题。
他的固定尺寸元素是 200x500，所以是的，如果浏览器窗口小于 200x500，任何方法都会出现问题。事实上，你的解决方案和我的解决方案都会表现得完全一样，除非你有别的意思
在您的解决方案中，如果窗口小于 200x500，#wrap 的上半部分和左半部分将被隐藏。