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

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

网格css方法

#包装{ 位置:绝对的; 上图:0; 底部:0; 右:0; 左:0; 显示:网格; Grid-template-columns: repeat(3,1fr); Grid-template-rows: repeat(3,1fr); ｝ .main { background - color: # 444; ｝ < div id = "包装" > < div class = "盒子" > < / div > < div class = "盒子" > < / div > < div class = "盒子" > < / div > < div class = "盒子" > < / div > <div class="box main"></div> < / div >

下面是如何使用两个简单的flexbox属性在两个轴上居中n个div:

设置容器的高度:在这里，主体被设置为至少100个视口高度。 对齐项目:中心;如果弯曲方向是行，将垂直中心块，否则水平，如果弯曲方向是列 justify-content:空间;将分配自由空间垂直如果弯曲方向是行或水平如果弯曲方向是列围绕div元素

身体{ 最小高度:100 vh; 显示:flex; 对齐项目:中心; justify-content:空间; ｝ < div > foo < / div > 酒吧< div > < / div >

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

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

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; } <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一个子将在中心垂直和水平对齐

最简单的flexbox方法:

将单个元素垂直和水平居中的最简单方法是使其成为一个伸缩项目，并将其边缘设置为auto:

如果将自动边距应用于伸缩项目，该项目将自动 扩展其指定的边距，以占用flex中的额外空间 容器……

.flex-container { 身高:150 px; 显示:flex; } .flex-item { 保证金:汽车; } < div class = " flex-container”> < div class = " flex-item”> 这个应该居中! < / div > < / div >

这种在每个方向上的边距扩展将把元素推到其容器的中间位置。