如果它只是关于文本对齐，它很简单。就用这个吧:

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父样式。

在某些情况下，当父类有一些样式属性时，它可能会影响子类，这将无法正常工作。

要在页面中居中Div，请检查fiddle链接

# vh { border - radius: 15 px; Box-shadow: 0 0 8px rgba(0,0,0,0.4); 填充:25 px; 宽度:200 px; 身高:200 px; 背景:白色; text-align:中心; 保证金:汽车; 位置:绝对的; 上图:0; 左:0; 底部:0; 右:0; ｝ <div id="vh"> div要垂直对齐</div>

更新 另一种选择是使用flex box检查小提琴链接

.vh { background - color: # ddd; 身高:200 px; 对齐项目:中心; 显示:flex; ｝ .vh > div { 宽度:100%; text-align:中心; vertical-align:中间; ｝ < div class = " vh”> <div> div要垂直对齐 < / div >

在这种情况下，我试图在button::before和button::after中垂直对齐文本内容，我能够使用vertical-align: text-top让它工作。

button::after {
  vertical-align: text-top;
}

需要遵循以下新的和简单的解决方案: .centered-class { 对齐项目:中心; 显示:flex; justify-content:中心; 宽度:100大众; 身高:100 vh; ｝ < div class = " centered-class”> 我在垂直和水平的中心。 < / div >

为了使元素垂直和水平居中，我们还可以使用下面提到的属性。

这个CSS属性垂直对齐项目，并接受以下值:

flex-start:项目对齐到容器的顶部。

flex-end:物品与容器底部对齐。

center:物品在容器的垂直中心对齐。

baseline:项目显示在容器的基线。

拉伸:物品被拉伸以适应容器。

这个CSS属性justify-content，用于水平对齐项目，并接受以下值:

flex-start:项目对齐到容器的左侧。

flex-end:物品对齐到容器的右侧。

center:项目在容器的中心对齐。

space-between:项目之间以相等的间距显示。

space-around:物品以等距显示。

运行此代码片段并查看垂直和水平对齐的div。

超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ .mydiv { 宽度:80 px; ｝ < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >