Html 编写一次，对不同内容的对话框CSS使用多个

我已经为我的同事编写了一个内部资源的web应用程序，基本模板的一部分是一个简单的对话框-一个隐藏的

div

，位于

主体

和

标题

之间，当单击按钮（另一个

div

）时，绝对位置会出现，根据单击的按钮显示内容，并在单击角上的X时消失。你知道常规

所以我怀疑我不应该这样做，但我发现我还不能在基本模板的CSS中描述对话框的CSS，这样我就可以确保它在屏幕上的位置总是或多或少相同。相反，似乎随着对话框内容的尺寸每页的变化，这需要我在任何给定页面上重新定义对话框的

左边距

和

右边距

例如，对话框的“我的基本css”就是这样，每次都会加载基本html模板：

#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}

请注意，缺少边距-我没有发现一个边距值可以在不导致对话框大小与其中内容严重不匹配的情况下完成任务。例如，在一个内容预计相当大的页面上，我将边距设置为：

#dialogBox {
margin: 5% 10% 0 10%;
}

但是，如果预期内容要轻得多，那么在我加载的下一页上，似乎需要再次设置边距，以便绕过视觉恶作剧：

#dialogBox {
margin: 5% 33% 0 33%;
}

这没什么大不了的，但它是重复的。我确信有更好的方法可以做到这一点，比如div会自然地扩展并在其上的任何给定页面上保持相等的

左边距

和

右边距

，同时保持其内容的“goldilock”大小-不太大，不太小，总是恰到好处

我意识到，在一些jQuery库中存在用于“美观”对话框的现有基础设施——它们甚至可以在屏幕上拖动并做一些小动作——但这只是一个内部的、员工专用的web应用程序，所以我对此不感兴趣。另外，知道如何自己建造一些东西也很好，对吗？我在这方面有点太新了，不会作弊，只是偷了一堆CSS，所以我试图诚实地从知识中获得

如果我遗漏了任何与这个问题密切相关的代码，我非常乐意编辑我的帖子

编辑-关于将对话框放置在包含

div

的对话框中，我有两个非常好的答案-我没有完全接受它们的唯一原因是，看起来我可能最终需要重新定义每个页面上维度的各个方面，尽管有一些代码已经完成。这可能是我的错，因为不同页面上的信息有点太不一样了，我希望避免在必要时强迫我的用户滚动页面。设置每页对话框的宽度可以让我做到这一点；我不知道让CSS来决定是否会让我这么做

---

最终编辑-目前我相信接受的答案是我项目的最佳解决方案。

您可以尝试使用自动边距，这样div应该自动居中

#dialogBox {
   margin: 5% auto 0;
}

---

在对话框上设置宽度是一个选项吗

如果是，则可以将left属性设置为50%，将margin left属性设置为-（宽度/2）

请看这里：

您也可以使用百分比：

width: 60%;
margin-left: -30%;

---

自动边距通常不适用于绝对定位元素：

我不确定您是否可以在不添加其他容器的情况下解决此问题。使用包装器，您可以使

位置：绝对取而代之，然后将其居中，而不需要负边距等

html

这里有任何大小的内容

css
.container{
高度：0；/*如有必要，隐藏/使其不可拾取*/
左：0；右：0；/*全宽*/
文本对齐：居中；/*居中内联内容*/
位置：绝对位置；
}
#对话框{
/*使div拉伸到其内容并允许居中*/
显示：内联块；
/*重置继承的文本对齐*/
文本对齐：左对齐；
}

这样，您就不需要关心对话框的宽度

演示

或者，您也可以使用
margin:auto当容器是绝对定位的容器时


旁注：由于此对话框可能取决于JavaScript，因此如果您不喜欢额外的标记，完全可以使用脚本添加它，尽管我认为这可能是过度工程的情况；）
 根据您是否知道元素的宽度，我可以想出两种快速方法

如果你知道宽度
如果您知道div的宽度，请设置距屏幕左侧的距离，并在边距中减去一半宽度

假设您的屏幕有这么宽：

/*
Legend:
Edge of screen: |
Center of element: .
Beginning of div: [
End of div: ]
*/
|                            .                            |
|                            .{center}                    |{size:56 characters}

你有一个这个宽度的div：

[---I am .a div---]{size:16 characters}

为了使用此方法使其居中，我们将设置从左侧到屏幕一半的距离（
左侧：50%；
）：

然后减去边距中的额外距离，div总大小的50%，或者，在我们的例子中是8个字符。（
左边距：-8个字符；
）：

我们现在有一个居中的div

这将适用于您使用的任何宽度类型（px，%，em…），只要您将div移回其宽度的一半

#对话框{
宽度：70%；
左：50%；
剩余利润：-35%；/*70%的一半*/
}
#对话框{
宽度：100px；
左：50%；
左边距：-50px；/*100px的一半*/
}
#对话框{
宽度：202em；
左：50%；
左边距：-101em；/*您可以看到图片*/
}



如果你不知道宽度。
制作一个新的div，作为对话框的容器。将此容器div的
左：
值（
位置：绝对；
）设置为
50%
，并从对话div的
左：
值中减去
50%
（现在
位置：re
[---I am .a div---]{size:16 characters}

|                            .[---I am .a div---]         |
|                            .                            |

|                   [---I am .a div---]                   |
|                            .                            |

[[---I am .a div---]]{size:still 16 characters}
/*
  It is important to note that the width of the outer div 
  will always be equal to the width of the inner div 
  unless defined otherwise.
*/

                              CD                 DC
|                            .[[---I am .a div---]]       |
|                            .                            |

                    D         C        D          C 
|                   [---I am .[a div---]          ]       |
|                            .                            |