html – 如何垂直居中的div？

概述我有一个div,我想要水平和垂直的中心. 对于水平问题,一切都很棒,但是我有一个垂直对齐的问题. 我试过这个： #parent { display: table;}#child { display: table-row; vertical-align: middle;} 但这不行. 如果您只需要支持支持transform(或其供应商前缀版本)的浏览器,请使用这一个奇 我有一个div,我想要水平和垂直的中心.

对于水平问题,一切都很棒,但是我有一个垂直对齐的问题.

我试过这个：

#parent {    display: table;}#child {    display: table-row;    vertical-align: mIDdle;}

但这不行.

解决方法 如果您只需要支持支持transform(或其供应商前缀版本)的浏览器,请使用这一个奇怪的旧技巧来垂直对齐元素.

#child {    position: relative;    top: 50%;    transform: translateY(-50%);}

如果你必须支持旧的浏览器,可以使用这些组合,但是由于渲染块vs表的差异,它们可能会很痛苦.

#parent {    display: table;}#child {     display: table-cell;     vertical-align: mIDdle;}

如果你的身高是固定的,你需要支持那些真正老旧的浏览器

#parent {   position: relative;}#child {   height: 100px;   position: absolute;   top: 50%;   margin-top: -50px;}

如果你的身高不固定,那就有workaround.

See it on jsFiddle.

总结

以上是内存溢出为你收集整理的html – 如何垂直居中的div？全部内容，希望文章能够帮你解决html – 如何垂直居中的div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。