这个问题在这里已有答案：
我正在尝试使用最少的标记和CSS获得一个居中的对话框内容，我几乎可以使用以下代码（您可以在CodePen中尝试它：https://codepen.io/rosenfeld/pen/Rxgwrq）：
#container {
display: grid;
padding: 1em;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-color: white;
align-content: center;
justify-content: center;
}
#item {
text-align: justify;
font-size: 20px;
text-shadow: 1px 1px lightblue;
max-width: 400px;
background-color: lightyellow;
padding: 1em;
overflow: auto;
}
h1 { text-align: center; color: darkred; }
a { color: darkred}<html>
<head>
<title>404 - Not Found</title>
</head>
<body>
<div id=container >
<div id=item>
<h1>404</h1>
Sorry, the page you are looking for does not exist. You may want to navigate to our <a href="/">main page</a>. If you just clicked on a broken link, please get in touch so we can fix it.
</div>
</div>
</body>
</html>我发现的唯一问题是，当内容溢出时，不会遵守项目的正确填充。尝试缩小窗口宽度以强制显示水平滚动条，您会注意到项目填充权限被完全忽略。
是否可以在不更改标记的情况下修复此问题，或者在CSS中使用：before和：after伪选择器？
P.S。：我第一次尝试实现这一点是使用Flexbox，但我发现网格布局似乎没有发生几个问题。例如，对于Flexbox，我被迫对项目使用“margin：auto”而不是对齐属性，因为它们会使顶部内容消失。另一个区别是，对于网格布局，底部填充是受到尊重的，唯一的问题是正确的填充（例如，更新：在Chrome中，但在Firefox中没有，因此在浏览器中这是不一致的）。与使用Flexbox相比，使用CSS网格可以让我更接近我想要的更少和更清晰的代码。此外，使用“margin：auto”的问题在于您无法为该项目实际设置一些余量。
这是因为单词不能被换行符破坏。如果它不适合，它的一部分是在填充的“领域”。
为了考试给.item财产word-break: break-all;。