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

来源：互联网发布：程序员的自我修养微盘编辑：程序博客网时间：2024/06/08 08:54
<!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>
阅读全文
0 0