Question

我已经阅读了至少有关于此问题的stackoverflow的五篇文章;以及文章like this and this。一定是可能的！

我体内有一个div，我想垂直居中在我的页面上。像这样：

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

上面的第二篇文章演示了它的解决方案，但它们的示例是其他div中的div，这对于想要在body中居中的div不起作用。我尝试在div中设置div并将高度设置为100％，但这只会让我的浏览器烦恼。

请帮忙！我不想诉诸JQuery！

Answer 1

将是使用绝对定位的可能解决方案之一：

html, body {
  height: 100%;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<body>
  <div class="center">I would like this to appear in the middle of the viewport.</div>
</body>

或者使用display：table

html,
body {
  height: 100%;
}
.container {
  height: 100%;
  width: 100%;
  display: table;
}
.wrapper {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}
}

<body>
  <div class="container">
    <div class="wrapper">
      I would like this to appear in the middle of the viewport.
    </div>
  </div>
</body>

Answer 2

尝试将position设置为relative，将text-align设置为center，top使用css vh个单位设置为{{ 1}}或45，取决于50元素的height或line-height

div

div {
  position:relative;
  top:45vh;
  text-align:center;
}

Answer 3

如果给div一个固定的高度，那么你可以使用绝对定位垂直居中。

div {
    height:100px;
    position:absolute;
    top:50%;
    margin-top:-50px;
}

margin-top应该是你身高的一半。

如果你将它包装在另一个div中，你也可以垂直居中一个未指定高度的div：

<div id="outer">
    <div id="inner">Some text here...</div>
</div>

#outer {
    height:100%;
    display:table;
}
#inner {
    display:table-cell;
    vertical-align:middle;
}

但是，display：table和display：table-cell的浏览器支持较少。

Answer 4

只需使用flexbox：

body {
  display:flex;
  height:100vh;
  align-items:center;
  justify-content:center;
}
div {
  width:125px;
  border:1px solid black;
}

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

如果您打算支持IE10，则需要一些prefixing，对于IE9及以下版本，您需要其他解决方案。实际上今天说 - 只要忽略IE10和更老，除非客户付钱给你。这些天人们实际上升级了。

Answer 5

现在有两种简单的方法： flex显示选项（html和body之间的3行代码）：

html {
  min-height:100%;
  display:flex;
  }
body {
  margin:auto;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

或表格显示（此处包含IE8）：

html {
  height:100%;
  width:100%;
  table-layout:fixed; /*if  to avoy spreading over the 100% width */
  display:table;
  }
body {display:table-cell;
  vertical-align:middle;
  text-align:center;
  }
div {
  display:inline-block;
  }
/* show me where it stands */
html {
  background:linear-gradient(to left, rgba(0,0,0,0.25) 50%, transparent 50%),linear-gradient(to top, rgba(0,0,0,0.25) 50%, transparent 50%);
  }
div {
  border:solid;
  }

<body>
    <div>I would like this to appear in the middle of the viewport.</div>
</body>

Answer 6

@serlingpa如果你身体里的所有东西都是你要垂直居中的那个div，那么我就有了解决方案：

func makeRequest(param : String, url : String, completionHandler : ((succeeded: Bool, msg: String? , crypted : String?) -> ())) {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), {
        println("This is run on the background queue")
        //CODE
        dispatch_async(dispatch_get_main_queue(), 0), {
            println("This is run on the main queue, after the previous block")
            completionHandler(succeeded: true, msg: nil, crypted: decrypted)
        }
    }
}

这可以在这个jsfiddle看到：http://jsfiddle.net/Rwthwyn/1bo7rx2q/

要在某些浏览器的旧版本上进行转换，您需要添加前缀（-moz - ， - ms - ， - o - ， - webkit-），例如：-webkit-transform：translateY（ -50％）等。

使用CSS在BODY中垂直居中DIV

6 个答案: