Html 如何使用css将屏幕上的弹出窗口（div）居中对齐，而其内容'；s的高度/宽度是否不固定？

当内容的高度和宽度已知时，我能够正确地将其居中对齐，但是如果弹出内容的高度和宽度可以变化，我想不出任何方法来做到这一点。有吗

我这样做是为了我可以有一个通用的弹出组件，它将接受任何高度或宽度的内容，从一行到屏幕的最大宽度/高度

---

注意：没有javascript。我在寻找纯CSS方法。

垂直对齐你看过吗

---

对于水平对齐，只需将

文本对齐：居中

应用于包含的元素。

您可以通过以下链接进行检查

}试试这个：

演示：

CSS:

HTML:

您好，这是一个示例内容

---

如果需要多个对话框，请用类替换ID。有多种方法可以做到这一点，最简单的方法是使用转换：

// HTML
<div id="parent"><div id="child"></div></div>

// CSS
#parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // needs browser-prefixes 
}

.container{
排名：0；
左：0；
背景：rgba（0,0,0,0.9）；
位置：绝对位置；
身高：100%；
宽度：100%；
溢出：滚动；
}
h1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：白色；
填充：1em；
}
输入，
文本区{
位置：相对位置；
}

中间。
中间。

您能为您的场景提供JSFIDLE吗。？

.reveal-modal {
background:#e1e1e1; 
margin: 0 auto;
width:160px; 
position:relative; 
z-index:41;
top: 25%;
padding:30px; 
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
box-shadow:0 0 10px rgba(0,0,0,0.4);

html, body {
    height:100%;
    width:100%;
}
#popup {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-align:center;
}
#popup>div.wrapper {
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    transform: translateY(-50%);
    display:block;
    text-align:center
}
#popup .content {
    display:inline-block;
    border:1px solid blue //For visual feedback.
    max-width:50%; //In case you want to restrict the div width
}

<div id="popup">
    <div class="wrapper">
        <div class="content">Hello this is a sample content</div>
    </div>
</div>

// HTML
<div id="parent"><div id="child"></div></div>

// CSS
#parent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // needs browser-prefixes 
}