居中位置：固定元素
我想创建一个position: fixed;以动态宽度和高度为中心的弹出框。我曾经margin: 5% auto;为此。没有position: fixed;它，则水平居中，但不能垂直居中。添加后position: fixed;，它甚至没有水平居中。
这是完整的设置：
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
如何使用CSS在屏幕上将此框居中？
问题答案：
基本上，您需要设置div top并将left其50%居中放置在div的左上角。您还需要将margin-top和设置为margin- leftdiv的高度和宽度的负一半，以将中心移到div的中间。
因此，在提供<!DOCTYPE html>（标准模式）的情况下，此操作应：
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
或者，如果你不关心垂直和旧的浏览器，如IE6 / 7为中心，那么你就可以代替也增加left: 0，并right: 0以该元素具有margin- left和margin-right的auto，使得具有固定宽度的固定定位的元素知道在哪里的左，右偏移开始。因此，在您的情况下：
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
同样，如果您关心IE，则仅在IE8 +中有效，并且仅水平居中而不垂直。
-
我想为一个笔记应用程序添加笔记加号。我做了一个固定位置的圆，这样它总是可见的。然后，我想做两条线，形成一个加号，并将这些线居中。这是代码： null null 请告诉我如何将加号居中到固定位置的圆上。谢谢！
-
问题内容： 我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时： 如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。 现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前，我的解决方案只是通过媒体查
-
问题内容： 这是我要完成的工作： 我需要一个按钮，该按钮与div的右侧保持一定距离，并且无论视口的大小如何，该按钮始终与div的侧面保持相同的距离，但是会随窗口滚动。 因此，始终是div右侧的x像素，而始终是视口顶部的y像素。 这可能吗？ 问题答案： 水平放置固定元素（基于另一个元素） （ 免责声明 ：此处提供的解决方案在技术上并非如问题标题所述为“绝对水平 ”，而是实现了OP最初想要的功能，固定
-
问题内容： 好的，我注意到了一些东西，但是在CSS规范中找不到。样式化元素将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样？CSS示例如下： 和HTML： 据我所知，该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗？另外，它是错误还是故意行为？ 到目前为止，我在互联网上没有找到关于此主题的任何内容，只是“固定位置使其固定在页面上”。 问题答案： 固定和
-
我创建了一个固定在页面底部的容器。但是，容器随后溢出页面，填充规则被完全忽略。我在论坛上搜索过，但找不到一个解决问题的方法。我试过使用position absolute，也试过使用Javascript计算滚动条宽度，但都没有用。 null null
-
问题内容： 我在将属性设置为的元素居中时遇到问题。有谁知道为什么图像没有居中？ 问题答案： 如果设置了宽度，则可以使用：