将div居中并将其放在页面顶部（仅限CSS！）

Question

我已经找到了这个，但找不到任何好的帮助。这很简单 - 我想将div放在页面的绝对顶部，然后让它居中。当我position: fixed时，我还写了top:0px和left:0px，然后搞砸了定位。救命？

Answer 1

您需要设置宽度，然后设置margin: auto，使其水平居中。

＆＃13;

＆＃13;

.container {
  position: relative;
  background: #eee;
}
.positioned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 50%;
  margin: auto;
  background: #ccc;
  text-align: center;
}

＆＃13;

<div class="container">
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <p>Some text</p>
  <div class="positioned">Content here</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将position:fixed与top:0px一起使用 - div应位于顶部，而left:50%则div位于中间位置。