Question

我尝试垂直对齐浏览器中心的第一个 div 以及 div 下面的所有内容。

我可以将这两个div包装在另一个 div 和居中中div可能有效，但是我无法改变这个html结构并且必须只有两个div才能实现。第一个div是一个动态容器，其中将显示不同的html。第二个div是静态的。

＆＃13;

.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

＆＃13;

<div class="center">
  I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>

＆＃13;

Answer 1

添加宽度和边距：自动0到css类并将其应用于div元素。

像这样：

.center {
  margin: 0 auto;
    width: 200px;
}


<div class="center">
  I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>

Answer 2

这应该有效（我添加颜色只是为了更容易看到结果）

.center {
 width:750px;
 margin-left: auto;
 margin-right: auto;
 background-color:Red;
}

<div class="center">
  I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>

Answer 3

<强>要点：您可以使用the jsfiddle中的此代码。

我写了两个名为.center-x和.center-y的课程。如果要通过x和y轴居中元素，可以使用这些类。

代码：

＆＃13;

.box-1 {
    background: #00adef;
    padding: 5px 10px;
}

.box-2 {
    background: #ccc;
    padding: 5px 10px;
    position: absolute;
    top: 100%;
    width: 170px;
}

.center-y {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.center-x {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform:  translateX(-50%);
}

.center-x.center-y {
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

＆＃13;

<div class="box-1 center-y center-x">
  I'm at the center of the Browser!
    
  <div class="box-2 center-x">I'm just below the center!</div>
</div>

＆＃13;

如果您想垂直居中，只需从.center-x移除.box-1课程即可。否则，如果您想要横向居中，只需从.center-x移除.box-1类。

Answer 4

如果浏览器支持视口单元，则可以使用以下方式：

.center {
  position: relative;
  left: 0;
  margin-top:50vh;  
}

看到它正常工作：http://jsfiddle.net/fgpqkrr4/

如何使用HTML5和CSS3垂直居中并对齐其他所有内容？

4 个答案: