相关疑难解决方法(0)

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我有一个200 x 200像素的div.我想在div的中间放置一个50 x 50像素的图像.

怎么做到呢？

我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

我知道这个问题已经有一百万次,但我无法找到解决方案.我有一个div,应该固定在屏幕上,即使页面滚动它应该始终保持在屏幕中间的中心!

div应该有500px宽度,应该30px远离顶部(margin-top),对于所有浏览器大小,应该在页面中间水平居中,并且在滚动页面的其余部分时不应该移动.

那可能吗？

我有一个div模拟小微调器的块，一切正常，但是css我的配置位于右上翼，我试图将它居中，但是当我从移动设备上看到它时，它从原地移动..可以在不改变不同尺寸设备中的位置的情况下将其居中吗？

.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

是否可以使用 calc() 将宽度用 % 定义的元素居中？

例如

.wrapper {
  width: 100%;
  background-color: black;
  height: 300px;
  position: absolute;
  top: 0;
}
.inside {
  width: 100%;
  margin-left: 30px;
  background-color: yellow;
  height: 250px;
  margin: 20px;
}
.inside h1 {
  width: 30%;
  background-color: white;
  text-align: center;
}
.inside h1 {
  position: absolute;
  left: calc(50% - 15%);
  left: -webkit-calc(50% - 15%);
}

<div class="wrapper">
  <div class="inside">
    <h1>CENTERED to viewport</h1>
  </div>
</div>

这是滑块。它有一个“字符串”，引导滑块的步骤，并且标题始终位于屏幕中间。但出于设计目的，该线从右侧开始一点，向左结束一点，宽度为 80%。顶部是带绳子的 1 号滑块，第二个滑块同步的是带有大白色方块的区域。

也许现在更清楚了，为什么我要尝试我所尝试的事情。