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。

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

Answer 2

这在纯css中实际上是不可能的，至少如果你想要体面的跨浏览器支持则不行。您可以使用css水平居中，但垂直方向需要一些javascript。