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/

谢谢你的朋友们！

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：

＆＃13;

#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;
}

＆＃13;

<div id="container">
  <!-- flex container -->

  <div id="center" class="box">
    how to center this div?
  </div>

</div>

＆＃13;

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

Answer 2

将position更改为fixed中的#center。请参阅JSFiddle。

Answer 3

免责声明：看看你过去的问题，看起来你对css了解得足够多，所以你可能不需要这么长的解释，但我解释了一切，以防其他人不太了解css发现这个答案。

@DrewKennedy提到的灵活解决方案是最好的，但如果你因任何原因无法使用flex，这里有另一个解决方案，类似于DrewKennedy提到的第一个解决方案。此解决方案使用绝对定位，因此它以页面为中心，但可以更改为固定以获得与其他答案相同的效果。

基本思想几乎相同。将其设置为绝对/固定定位时，可以将其设置为屏幕宽度和高度的一半（从左上角开始）。这可能意味着内容只会从中间开始，所以它不会居中，所以在DrewKennedy的回答中，他从边距中取出了元素宽度和高度的一半来修复它。 / p>

但是，此解决方案使用转换转换将其移回。当您使用百分比translate()转换时，它会移动元素相对于它自己的大小。这意味着您可以将它用于动态大小的事物。 This example中有一个完整的段落，并且垂直居中。当你使用完全相同的css但在div中只有一个单词时，它是also still vertically centred.。

这是相关的css＆amp; HTML：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-color: #050505;
}
.middle-align {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Works with dynamically sized things too! */
  max-width: 700px;
  min-width: 100px;
  /* Pointless styles to make it look nice: */
  font-family: 'Times New Roman', serif;
  background-color: #ddd;
  padding: 50px;
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: -25px;
}

＆＃13;

<div class="middle-align">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra fermentum metus sit amet consectetur. Integer dolor purus, pretium at arcu ac, ornare interdum lacus. Cras diam nibh, fringilla sed elementum quis, varius vitae enim. Nunc nec orci
  imperdiet, malesuada nunc vitae, lobortis lacus. Donec et magna ornare, facilisis urna et, hendrerit massa. Aenean vitae convallis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis convallis
  tellus. Maecenas a lorem ac turpis malesuada aliquam et sit amet sem. Nullam eu neque mi. Pellentesque ac ullamcorper felis, a mollis arcu. Vestibulum at dui congue, euismod tortor at, auctor est. Pellentesque faucibus dui nec dui hendrerit vestibulum.
</div>

＆＃13;

将div放在屏幕中心的固定内部

3 个答案: