水平垂直居中的方式（还有很多，这里以后继续补充）

最新推荐文章于 2021-11-11 07:50:45 发布

55145848

最新推荐文章于 2021-11-11 07:50:45 发布

阅读量643

点赞数

分类专栏： css 前端ie兼容文章标签： html css

本文链接：https://blog.csdn.net/u012857153/article/details/77050798

版权

css 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端ie兼容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* 第一种 兼容ie8以及更高版本，ie7不支持， margin: auto;可以尝试hack的形式解决*/
     #ddd {
      position: relative;
      height: 200px;
      width: 500px;
      background: red;
      margin: 0 auto
    }

    img {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    } 
    /* 第二种 兼容ie10以及更高版本。translate3d是css3*/
    /* #ddd {
      position: relative;
      height: 200px;
      width: 500px;
      background: red;
      margin: 0 auto;
    }

    img {
      position: absolute;
      margin: auto;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
    } */
    /* 第三种 兼容ie8以及更高版本，ie7不支持 display: inline-block;*/
    /* #ddd {
      position: relative;
      height: 200px;
      width: 500px;
      background: red;
      margin: 0 auto;
      text-align: center;
    }

    #ddd:before {
      content: '';
      position: relative;
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }

    img {
      position: relative;
      display: inline-block;
      vertical-align: middle;
    } */
  </style>
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <div id="ddd">
    <img style="max-width:200px;max-height:50px" src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg"
      alt="">
  </div>
  <script>

  </script>
</body>

</html>

55145848

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平垂直居中的方式（还有很多，这里以后继续补充）

<!DOCTYPE html><!--[if IE 8]> <html class="
复制链接

扫一扫