为什么在CSS3中没有任何一种一次性的垂直居中方式?[已关闭]

您可以使用 vertical-align: center 如果你制作你的容器 display: table-cell

browser support

这个名字可能有点混淆。css声明 vertical-align 不是用于在其父级中垂直居中某些内容(除非我们谈论的是表单元格)。相反,它是为了设置声明规则的元素的垂直对齐。

如果您正在使用 inline-block 让一些元素挨着坐着并表现出来。

你可能想支持 Flexible Box Layout Module 以下为:

摘要

该规范描述了为用户优化的CSS框模型 界面设计。在柔性布局模型中,柔性的子对象 容器可以在任何方向上放置,并且可以“弯曲”它们 尺寸,要么增加以填充未使用的空间,要么缩小以避免 溢出父对象。的水平和垂直对齐 孩子们很容易被操纵。这些盒子的嵌套(水平 内部垂直或垂直内部水平) 二维布局。

注意 this from the proposed spec 以下为:

flex容器为其 目录这与建立块格式化上下文相同, 除了使用了柔性布局而不是块布局之外:浮动不使用 侵入flex容器,而flex容器的边缘会 不会随着内容的边缘而崩溃。柔性容器形成 像块容器一样为其内容包含块。

弹性容器不是块状容器 ,因此,一些基于块布局假设设计的属性不适用于 flex布局的上下文。特别是:

• 所有 '列-*' Multicol模块中的属性对flex容器没有影响。
• '浮动' 和 “清除” 对弹性项目没有影响。
• '垂直对齐' 对弹性项目没有影响。

请记住,这个规范还很早,并且已经有了以前的版本(被这个版本取代)。因此,它试图解决一些常见的布局问题,这些问题似乎应该“解决”,显然现在开始称其可行还为时过早。

但我们可以抱有希望,不是吗?

• MDN CSS flexible box
• Using CSS flexible boxes