Question

我知道这个问题已经讨论了很多，我已经阅读了其他问题和答案，但我无法解决这个问题。我正在使用bootstrap，我想将一个div工作在chrome和firefox中，但在资源管理器中，内容位于屏幕的右侧。我不确定采取什么方法来纠正这个立场。我的页面的CSS是：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
  color: black;
}
u {
  color: red;
}
.container {
  position: relative;
  height: 14rem;
}
.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background-color: white;
}
.fa-exclamation-triangle {
  color: red;
  padding-right: 10px;
}

<body>
  <div class="jumbotron vertical-center">
    <div class="container">
      <h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
      <center>
        <h3>Main Content.</h3>

      </center>
    </div>
  </div>
</body>

我添加了一个小提琴Here。感谢您提供任何帮助和建议

Answer 1

这是因为你缺少正常的转换属性（和旧浏览器的-ms） http://jsfiddle.net/tvc4tv9L/2/

-moz-transform:    translate(-50%, -50%);
-o-transform:      translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Answer 2

尝试将transform: translate(-50%, -50%)和-ms-transform: translate(-50%, -50%)添加到.jumbotron以获取IE9 +。

Answer 3

永远不要使用<center>标签。请改用css等效项：text-align: center;
您忘记了-ms-带前缀的翻译属性。
如果您不关心IE9或更低版本的支持：您也可以使用flexbox。

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  background: black
}

.jumbotron {
  margin: auto;
  background: white;
}

.container {
  text-align: center;
}

<body>
	<div class="jumbotron vertical-center">
		<div class="container">
			<h1>Title</h1>
			<h3>Main Content.</h3>
		</div>
	</div>
</body>

Answer 4

另一种方法：

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  font-family: "Verdana", Geneva, sans-serif;
}
.sRed {
  color: black;
}
u {
  color: red;
}
.container {
  position: relative;
  height: 14rem;
}
.jumbotron {
  position: absolute;
  top: 50%;
  left: 50%;
  width:300px;
  height:200px;
  margin:-100px 0 0 -150px;
}

.fa-exclamation-triangle {
  color: red;
  padding-right: 10px;
}

＆＃13;

<body>
  <div class="jumbotron vertical-center">
    <div class="container">
      <h1><center><i class="fa fa-exclamation-triangle fa-lg"></i><u><span class="sRed">Title</span></u></center></h1>
      <center>
        <h3>Main Content.</h3>

      </center>
    </div>
  </div>
</body>

＆＃13;

div不在IE中居中，但在chrome和firefox中工作正常

4 个答案: