css - 将一个 div 放在屏幕中央的固定 div 中

Question

我在屏幕顶部固定了一个 div。在这个 div 里面，我放了一个绝对位置，我想在屏幕中间居中。

#menu{
  position:fixed;
  width:100%;
  height:30px;
  background:#000;
}

#center{
position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background:#fff;
}

..

<div id="menu">

<div id="center">
how to center this div?
</div>

</div>

如果我将 #menu 位置更改为相对它工作正常......但我需要修复它。我不能把 div #center 放在中间是什么问题？

https://jsfiddle.net/y5s77mmq/1/

谢谢 friend 们!

Answer 1

有两种方法可以实现这一点。一种是给你的 #center div 一个 fixed 位置:

#center {
    position:fixed; /* change this to fixed */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background:#fff;
}

但是，这将使其以屏幕为中心，而 而不是 页面。

如果要在网页上垂直和水平居中，一种选择是使用 flex :

#container {
  display: flex;
  /* establish flex container */
  flex-direction: column;
  /* make main-axis vertical */
  justify-content: center;
  /* align items vertically, in this case */
  align-items: center;
  /* align items horizontally, in this case */
  height: 500px;
  /* for demo purposes */
  border: 1px solid black;
  /* for demo purposes */
  background-color: #eee;
  /* for demo purposes */
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

#center {
  background: #fff;
  width:100px;
  height:100px;
}

<div id="container">
  <!-- flex container -->

  <div id="center" class="box">
    how to center this div?
  </div>

</div>

此外，由于 #center div 与您的 #menu div 无关，因此不应嵌套。