中心位置：固定元素

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%);}您可能还希望添加更多供应商前缀属性（请参阅示例）。