如何使用CSS或CSS + jquery在页面上垂直和水平对齐div容器？

Question

我敢肯定这已经被问过了，但是我能找到的所有问题都太复杂了。 简而言之，如何将div容器水平和垂直地对齐到页面的中心和中间，以便在调整页面大小时也可以将其保持在该位置。

我需要的是一个空白的浏览器窗口，该窗口的div大小无论如何都将保持在屏幕中央。 使用margin:auto可以很容易地进行水平对齐，但是看起来似乎是麻烦的是垂直对齐。

许多“解决方案”都要求首先将div浮动到一个设定的高度。我敢肯定必须有一种更简单的方法...

Answer 1

绝对有很多方法可以实现这一目标。 这是一种方法。 我正在使用position:absolute 。

 .center
{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  border:5px solid black;
  width:100px;
  height:100px;
} 

演示

Answer 2

flexbox方式：

FIDDLE （调整浏览器窗口大小）

标记

<div class="container">
    <div class="child"></div>
</div>

的CSS

.container {
    width: 80vw;
    height: 80vh;
    display:flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    background: aqua;
}
.child {
    width: 50%;
    height: 50%;
    background: crimson;
}

Answer 3

您可以使用display: table-cell和vertical-align: middle实现此目的。

HTML：

<div class="container">
    <div class="content">
        blah blah
    </div>
</div>

CSS：

.container {
    display: table-cell;
    height: 100vh;
    text-align: center;
    vertical-align: middle;
    width: 100vw;
}

.content {
    display: inline-block;
}

这是一个小提琴 。

Answer 4

没有1行CSS方式可以垂直居中div，因此您需要一种解决方法，尝试这种最简单的方法。

body {
   position:relative;
}
div {
   position:absolute;
   top: 50%;
}

用jQuery

$(document).ready(function(){
   $('div').css('margin-top', -$(this).height()/2);
});

注意：div的边距顶部应为其高度的一半减去，因此在此示例中，其-50px的高度是100px。

Answer 5

设置边距：0自动; 到容器以进行水平对齐。要进行垂直调整，可以使用margin-top属性。如果需要垂直对齐而不是调整，则可以使用javascript或jquery。 首先使用jquery查找浏览器窗口的高度，然后随着窗口高度的变化调整margin-top（以比例）css属性。您可以设置一个事件来检测窗口大小的变化。