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

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

我可能能够将这两个div包装到另一个div中，并将该div居中，但我无法更改此html结构，只能使用两个div来实现。第一个div是一个动态容器，其中将显示不同的html。第二个div是静态的

.中心{ 位置：绝对位置； 左：0； 右：0； 排名：0； 底部：0； } 我在浏览器的中心！

---

我就在中心下面 如果浏览器支持视口单位，则可以使用以下方法：

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

---

查看它是否正常工作：

将宽度和边距：自动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>

---

我添加颜色只是为了更容易看到结果 .中心{ 宽度：750px； 左边距：自动； 右边距：自动； 背景色：红色； } 我在浏览器的中心！ 我就在中心下面 总结： 您可以使用中的此代码

我写了两个类，分别是.center-x和.center-y。当您希望通过x轴和y轴使图元居中时，可以使用这些类

守则：

.框-1{ 背景：00adef； 填充物：5px10px； } .方框-2{ 背景：ccc； 填充物：5px10px； 位置：绝对位置； 最高：100%； 宽度：170px； } .center-y{ 位置：绝对位置； 最高：50%； -webkit转换：translateY-50%； -ms转换：translateY-50%； 转化：translateY-50%； } .center-x{ 位置：绝对位置； 左：50%； -webkit转化：translateX-50%； -ms转化：translateX-50%； 转化：translateX-50%； } .center-x.center-y{ -webkit转换：translateY-50%translateX-50%； -ms转换：translateY-50%translateX-50%； 转化：translateY-50%translateX-50%； } 我在浏览器的中心！ 我就在中心下面！

---

根据你的中卫占据了整个空间的事实，它在技术上居中…我刚刚更新，它是垂直居中，而不是水平居中。您是否指定了.center div的高度，或者是否灵活？没有指定高度，因为浏览器可以从iPad或桌面运行。无法设置宽度，因为浏览器可以从iPad或桌面运行。它应该是垂直的居中，而不是horizontal@Pepo_rasta我的错…我还没看到。