html – 如何在屏幕上以水平和垂直方向居中显示未知大小的DIV

前端之家收集整理的这篇文章主要介绍了html – 如何在屏幕上以水平和垂直方向居中显示未知大小的DIV前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要将DIV居中放在屏幕中央,水平和垂直,我不知道DIV大小,div是位置:固定;.

这个负边距技巧不起作用,因为我不知道div大小.
顶部:50%;左:50%; magin顶:-100;保证金左:-100;

保证金左:自动; margin-right:auto;不起作用,因为不适用于position:fixed;和margin-top:auto;边距:汽车;也不垂直居中;

我发现这个方法:display:table-cell; vertical-align:middle;不工作以太;

我知道如何使用JavaScript使用getComputedStyle来获取div内容大小,并做数学来修复它的位置,但我想要一个纯CSS解决方案,因为我不希望每次我的div内容更改时都触发JS .

解决方法

在css表的帮助下,您可以垂直居中一个高度未知的盒子.盒子的高度由其内容决定.请参阅此 demo,它使用框的固定属性position :.盒子的宽度也设置好了.

这是IE< = 7的解决方法

#table {
  height:100%;
  text-align:center;
  white-space: nowrap;
}
#container {
  display: inline;
  zoom: 1;
  text-align: left;
  vertical-align: middle;
}
#IEcenter {
  height: 100%;
  width: 1px;
  display: inline;
  zoom: 1;
  vertical-align: middle;
}
#container * {
  white-space: normal;
}

这符合您的要求吗?

猜你在找的HTML相关文章