css ie居中

CSS IE居中基础概念

在CSS中，居中布局是一个常见的需求，尤其是在兼容老旧浏览器如Internet Explorer（IE）时。IE浏览器的版本众多，从IE6到IE11，每个版本的CSS支持程度不同，因此需要针对不同版本采取不同的居中策略。

类型

水平居中：使元素在其父容器中水平居中。
垂直居中：使元素在其父容器中垂直居中。
水平和垂直居中：使元素在其父容器中同时水平和垂直居中。

应用场景

网页标题
按钮
图片
表单元素

遇到的问题及解决方法

1. IE6/IE7水平居中

问题：在IE6和IE7中，使用margin: 0 auto;无法实现水平居中。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  text-align: center;
}
.center {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
  <div class="center"></div>
</div>
</body>
</html>

2. IE8垂直居中

问题：在IE8中，使用display: table-cell;和vertical-align: middle;无法实现垂直居中。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: table;
  height: 300px;
  width: 100%;
}
.center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">
    <div style="display: inline-block; background-color: red; padding: 20px;">垂直居中内容</div>
  </div>
</div>
</body>
</html>

3. IE9水平和垂直居中

问题：在IE9中，可以使用Flexbox布局，但需要确保兼容性。

解决方法：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 300px;
  width: 100%;
}
.center {
  background-color: red;
  padding: 20px;
}
</style>
</head>
<body>
<div class="container">
  <div class="center">水平和垂直居中内容</div>
</div>
</body>
</html>