居中 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>居中方法</title>

    <style>
    /*固定宽高的div很简单，如下：*/
.div2{
    position: absolute;
     left: 50%;
     top: 50%;
    width:200px;
    height:100px;
    margin-left:-100px;
    margin-top:-50px;
    background-color:#0000FF;
    z-index:2;
    }
    /*非固定宽高的div，不兼容IE8/如下*/
    .center {
      position: absolute ;
      top: 50%;
      left: 50%;
      background-color:#CCCCCC;
      width:500px;
      height: 400px;
    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/*此方法和固定宽高的方法重复，就加了一个ie6的兼容设置：设置 position: fixed; _position:absolute;
设置 left:50% 和 top:50%;
设置 margin: -(DIV的offsetWidth/2) 0 0 -（DIV的offsetHeight/2）*/
.div3{
 position: fixed;
 _position:absolute; /* hack for IE6 */
 z-index:1;
 top: 50%;
 left: 50%;
 margin: -141px 0 0 -201px;
 width: 400px;
 height:280px;
 border:1px solid #CCC;
 /*line-height: 280px;*/
 /*text-align:center;*/
 background-color:#F4F4F4;
 overflow:hidden;
}

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
    </style>
</head>
<body>
    <div class="center"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>
</body>
</html>

 

posted @ 2016-09-01 14:51  一座城池。  阅读(169)  评论(0)    收藏  举报