中心位置：固定元素

Question

中心位置：固定元素我想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将此框置于屏幕中心？

Answer 1

我想制作一个以动态宽度和高度为中心的弹出框。

这是一种现代方法，用于水平居中具有动态宽度的元素 - 它适用于所有现代浏览器; 支持可以在这里看到。

更新的示例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);}

对于垂直和水平居中，您可以使用以下内容：

更新的示例

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);}

您可能还希望添加更多供应商前缀属性（请参阅示例）。