在某些浏览器和某些浏览器中,将div与屏幕对齐

时间:2016-11-21 13:25:48

标签: css google-chrome internet-explorer

.txt-loading {
  width: 250px; 
  height: 75px;
  text-align : center;
  position :  fixed;
  top : 0;
  left : 0;
  right : 0;
  bottom: 0;
  margin : auto;
  font-size : 16px;
  z-index : 10;
}
<div class="txt-loading">Loading...</div>

我已经在互联网上的某个地方看到了这个代码,以便将div与屏幕对齐,并且它开始使用chrome但不能在IE中工作。我非常确定css样式是错误的将div放在屏幕中,但为什么它在chrome中工作,有时也适用于IE。可能是由于浏览器的怪癖模式可能会起作用但是有人可以告诉我为什么它在chrome中工作,为什么它在IE 11中不起作用。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

以你的方式在整个窗口上拉伸div。使用此代码进行中心定位:

.txt-loading {
  text-align : center;
  position :  fixed;
  top : 50%;
  left : 50%;
  transform: translate(-50%,-50%);
  font-size : 16px;
  z-index : 10;
}
<div class="txt-loading">Loading...</div>