html – 如何垂直居中的div?

前端之家收集整理的这篇文章主要介绍了html – 如何垂直居中的div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div,我想要水平和垂直的中心.

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

我试过这个:

  1. #parent {
  2. display: table;
  3. }
  4.  
  5. #child {
  6. display: table-row;
  7. vertical-align: middle;
  8. }

但这不行.

解决方法

如果您只需要支持支持transform(或其供应商前缀版本)的浏览器,请使用这一个奇怪的旧技巧来垂直对齐元素.
  1. #child {
  2. position: relative;
  3. top: 50%;
  4. transform: translateY(-50%);
  5. }

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

  1. #parent {
  2. display: table;
  3. }
  4.  
  5. #child {
  6. display: table-cell;
  7. vertical-align: middle;
  8. }

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

  1. #parent {
  2. position: relative;
  3. }
  4.  
  5. #child {
  6. height: 100px;
  7. position: absolute;
  8. top: 50%;
  9. margin-top: -50px;
  10. }

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

See it on jsFiddle.

猜你在找的HTML相关文章