尝试此解决方案：

.扩展器{位置：绝对；顶部：0px；左：0px；底部：0px；右：0px；宽度：100%；高度：100%；overflow-y：隐藏；overflow-x：隐藏；}.衬垫中心{宽度：100%；高度：100%；显示：-webkit框；显示：-moz框；显示：-ms flexbox；显示：-webkit flex；显示：柔性；-webkit盒子包：中心；-moz盒装：中心；-ms柔性包装：中心；-webkit调整内容：中心；对齐内容：中心；-webkit框对齐：居中；-moz框对齐：居中；-ms flex align:中心；-webkit对齐项目：中心；对齐项目：居中；}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>

使用CSS+构建。

较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器，您可能需要考虑这样做：

<div style=“位置：相对；宽度：400px；高度：400px，背景色：红色”><span style=“位置：绝对；行高：40px；高度：80px；文本对齐：居中；宽度：300px；溢出：隐藏；顶部：计算（50%-40px）；左侧：计算（50%-150px）；”>这里有两条线，即使父div改变大小，也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc（50%-[inerFixedHeightInPX/2]px）；height:[inerFixed HeightInPX；”。

我不确定是否有人走上了写作模式的道路，但我认为它彻底解决了问题，并得到了广泛的支持：

.垂直{//边框：1px实心绿色；写入模式：垂直lr；文本对齐：居中；高度：100%；宽度：100%；}.水平{//边框：1px纯蓝色；显示：内联块；书写方式：水平tb；宽度：100%；文本对齐：居中；}.内容{文本对齐：左侧；显示：内联块；边框：1px实心#e0e0e0；衬垫：.5em 1em；边界半径：1em；}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>

当然，这将适用于您需要的任何维度（除了100%的父维度）。如果取消注释边界线，这将有助于熟悉自己。

JSFiddle演示供您摆弄。

犬只支持：85.22%+6.26%=91.48%（甚至Internet Explorer也支持！）

绝对定位和拉伸

与上面的方法一样，首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中，我再次使用了该方法来水平和垂直地居中子对象，尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0，尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小，所以它不能到达所有的四条边。

然而，将自动设置为所有四边的边距会导致相反的边距相等，并将子div显示在父div的中心。

不幸的是，上面的方法在InternetExplorer7及以下版本中不起作用，并且像前面的方法一样，子div中的内容可能会变得太大，导致其被隐藏。

另一种方式（此处尚未提及）是使用Flexbox。

只需向容器元素添加以下代码：

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox演示1

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；对齐内容：中心；/*水平对齐*/对齐项目：居中；/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet，consectetuer adipiscing elit，sed diam nonmmy笔尖</div>

或者，当柔性容器中只有一个柔性项时，flexbox也可以使用自动边距将柔性项居中，而不是通过容器对齐内容（如上面问题中给出的示例）。

因此，要在水平和垂直方向上将柔性项居中，只需将其设置为margin:auto

Flexbox演示2

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：24px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；填充：0 20px；边距：20px；显示：柔性；}.箱形跨度{边距：自动；}<div class=“box”><span>边距：在弹性项上自动将其水平和垂直居中</span></div>

注意：以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为，因为默认情况下，弯曲方向的值为row。然而，如果柔性项需要在垂直列中布局，则应在容器上设置柔性方向：列，以将主轴设置为列，此外，justify-content和align-items财产现在与justify content相反：垂直居中和align-items：水平居中）

灵活方向：列演示

.box格式{高度：150px；宽度：400px；背景：#000；字体大小：18px；字体样式：倾斜；颜色：#FFF；显示：柔性；弯曲方向：柱；对齐内容：中心；/*垂直对齐项目*/对齐项目：居中；/*水平对齐项目*/}p型{边距：5px；}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容：居中”-垂直对齐</p><p>“对齐项目：居中”-水平对齐</p></div>

flexyboxes是一个很好的地方，可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持

此外，现在的浏览器支持非常好：caniuse

为了实现显示的跨浏览器兼容性：调整和对齐项目，可以使用以下选项：

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。与行高度类似，它仅在您有一行文本时有效。尽管这样，如果您有更多的内容，文本仍然会居中，但div本身会稍微大一些。

因此，与其继续：

div {
  height: 120px;
  line-height: 120px;
}

你可以说：

div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这会将div的顶部和底部填充设置为60px，左侧和右侧填充设置为零，使div高120像素（加上字体的高度），并将文本垂直居中放置在div中。