html - 与其容器和窗口相关的 div 位置

Question

我无法设置 div 的样式，使其水平位于其容器的中间(宽度)并垂直位于窗口高度的中间。

Answer 1

你的意思是这样的吗？

body, html { height: 100%; margin: 0; padding: 0; }

div { padding: 1em; box-sizing: border-box; }

.parent {
  width: 50%;
  background: lightblue;
  border:1px solid blue;
}

.child {
  width: 50%;
  background: lightpink;
  border:1px solid red;
  margin: 0 auto;
  top: 50vh;
  position: relative;
  transform: translateY(-100%);
}

<div class="parent">
  <div class="child">middle</div>
</div>

jsFiddle:https://jsfiddle.net/azizn/pxsL7usy/

逻辑:

将 div 在其父级/容器内水平居中非常简单，我们只需定义一个 width 并添加 margin: 0 auto。

要使元素垂直位于视口(viewport)中心，您可以使用 CSS 视口(viewport)单位，在本例中为 vh，即视口(viewport)高度。您应用了一个非静态的position(如relative、absolute 或fixed)和一个top 50vh 的值将 div 偏移到视口(viewport)的一半。然后添加 transform: translateY(-100%) 以从顶部偏移量减少元素的高度。