如何在不嵌套其他容器的情况下垂直对齐内容？

我在垂直对齐容器中的项目时遇到了很多麻烦.

我已经实施了很多建议.所有这些都建议将内容包装在另一个div或容器中.

这引起了各种各样的问题,原因有多种我不会介入但是我想选择一个新的要求:它不会被包装在另一个容器中.

这引出了我的解决方案(样式内联为简洁):

my content

或这个:

my content

我喜欢第一个选项而不是第二个选项,因为第二个选项更适合你,"为什么在这个其他内容的中间有一个Table Cell独立于一个表？"

我犹豫是否使用第一个选项的原因是因为我不确定它是否适用于所有浏览器.我也可以对第二个选项说同样的话.

哪个选项在语义和浏览器支持方面更好？

要垂直居中内容,无需嵌套其他包装器,您只需使用flexbox即可.

CSS

div {
    display: flex;
    align-items: center;       /* center content vertically, in this case */
    justify-content: center;   /* center content horizontally, in this case (optional) */
}

HTML

my content

DEMO

请注意,尽管div中的文本似乎没有容器,但从技术上讲,当div变为flex容器时,文本将被包装在成为flex项的匿名容器中.这就是CSS的工作原理.如果不将内容包装在HTML元素中,CSS将创建匿名块或内联框.

你写了:

我喜欢第一个选项而不是第二个选项,因为第二个选项是你要去的,"为什么在这个其他内容的中间有一个Table Cell独立于一个表？

我犹豫是否使用第一个选项的原因是因为我不确定它是否适用于所有浏览器.我也可以对第二个选项说同样的话.

从功能的角度来看,两者之间没有区别:

my content

和

my content

两者都做同样的事情.原因如下:

在浏览器使用默认样式表应用样式之前,HTML元素(包括div和td)没有任何display价值.

因此,td像表格单元格这样的行为的唯一原因是浏览器的默认样式表指定td { display: table-cell; }.

div通过display: block用自己的浏览器覆盖浏览器,你也在做同样的事情display: table-cell.

所以,它真的在功能方面和所有玩家一样的东西- ,,div 并且是所有浏览器都支持要回至少IE6.tddisplay: table-cellvertical-align: middle

但是,对于flexbox的浏览器支持尚未完成.Flexbox是CSS3,除IE 8和9外,所有主流浏览器都支持.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加所需的所有前缀,请在此处发布CSS:Autoprefixer.

作为旁白:

HTML元素没有固有的样式.换句话说,标签名称本身不带样式.直到他们通过浏览器display并且应用其他CSS属性.(请参阅HTML默认样式表.)

在此基础上MDN错误报告,似乎唯一的HTML元素谁的盒子是基于构建在他们的标签名称是,

和

.