CSS网格

正文，html｛margin:0；｝正文{显示：栅格；最小高度：100vh；对齐项目：居中；}<div>div垂直对齐</div>

垂直和水平居中

HTML

<div id="dialog">Centered Dialog</div>

CSS

#dialog {
    position:fixed; top:50%; left:50%; z-index:99991;
    width:300px; height:60px;
    margin-top:-150px;  /* half of the width */
    margin-left:-30px; /* half of the height */}

享受

现在，Flexbox解决方案是现代浏览器的一种非常简单的方式，因此我向您推荐：

.容器{显示：柔性；对齐项目：居中；对齐内容：中心；高度：100%；背景：绿色；}身体html格式{高度：100%；}<div class=“container”><div>div垂直对齐</div></div>

下面是我可以构建的最好的全方位解决方案，以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示：表格；位置：绝对；顶部：0；左：0；高度：100%；宽度：100%；}.中间{显示：表格单元格；垂直对齐：中间；}.内部{左边距：自动；右边距：自动；宽度：400px；/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前，一个沉闷的午夜</p＞</div></div></div>

查看动态内容的工作示例

我内置了一些动态内容来测试它的灵活性，并希望知道是否有人发现它有任何问题。它也可以很好地用于居中的覆盖——灯箱、弹出窗口等。

实现这一点有多种方法。

使用CSS的flex属性。

解决方案#1.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

或使用display：flex；边距：自动；

解决方案#2.父级{宽度：400px；高度：200px；背景：蓝色；显示：柔性；}.儿童{宽度：75px；高度：75px；背景：黄色；边距：自动；}<div class=“parent”><div class=“child”></div></div>

显示文本中心

解决方案#3.父级{宽度：400px；高度：200px；背景：黄色；显示：柔性；对齐项目：居中；对齐内容：中心；}<div class=“parent”>中心</div>

使用百分比（%）高度和宽度。

解决方案#4.父级{位置：绝对；高度：100%；宽度：100%；背景：蓝色；显示：柔性；对齐项目：居中；对齐内容：中心；}.儿童{宽度：75px；高度：75px；背景：黄色；}<div class=“parent”><div class=“child”></div></div>

我最近发现了一个技巧：你需要使用前50%，然后再进行translateY（-50%）。

.外部div{位置：相对；高度：150px；宽度：150px；背景色：红色；}.居中div{位置：绝对；顶部：50%；-webkit转换：translateY（-50%）；-ms变换：translateY（-50%）；变换：translateY（-50%）；背景色：白色；}<div class='outer-div'><div class='entered-div'>测试文本</div></div>