DIV 居中

<div class="container"></div>
  1. div水平居中:设置margin的左右边距为自动
    div水平居中
    .container{
        margin:0 auto;
    }
  2. div垂直&水平居中:已知div宽高,利用div宽高一半的负margin
    宽高一半负margin
    .container{
        width: 150px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        border: 1px solid red;
    }
  3. div垂直&水平居中:利用transform
    .container {
        position: absolute; left: 50%; top: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
  4. div垂直&水平居中:利用嵌套div
    嵌套div居中
    <div class="container">
        <div class="sub-container"></div>
    </div>
    .container{
        width:200px;
        height:100px;
        position: absolute;
        top:50%;
        left:50%;
    }
    .sub-container{
        width:100%;
        height:100%;
        margin-top:-50%;
        margin-left:-50%;
    }
  5. postion结合margin:auto 
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <title></title>
        <style>
            * {
                padding:0;
                margin:0;
            }
            html,body {
                height:100%;
            }
            .demo {
                width:100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background:lightblue;
            }
            .demo-1 {
                position: absolute;
                margin:0 auto;
                left:0;
                right:0;
            }
            .demo-2 {
                position: absolute;
                margin:auto 0;
                top:0;
                bottom:0;
            }
            .demo-3 {
                position: absolute;
                margin:auto;
                top:0;
                bottom:0;
                left:0;
                right:0;
            }
        </style>
    </head>
    <body>
        <div class="demo demo-1">水平居中</div>
        <div class="demo demo-2">垂直居中</div>
        <div class="demo demo-3">中心居中</div>
    </body>
    </html>
  6. postion和translate 一起使用达到水平、垂直居中
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <title></title>
        <style>
            * {
                padding:0;
                margin:0;
            }
            html,body {
                height:100%;
            }
            .demo {
                width:100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background:peachpuff;
            }
            .demo-1 {
                position: absolute;
                left:50%;
                -webkit-transform:translateX(-50%);
            }
            .demo-2 {
                position: absolute;
                top:50%;
                -webkit-transform:translateY(-50%);
            }
            .demo-3 {
                position: absolute;
                top:50%;
                left:50%;
                -webkit-transform:translateX(-50%) translateY(-50%);
            }
        </style>
    </head>
    <body>
    <div class="demo demo-1">水平居中</div>
    <div class="demo demo-2">垂直居中</div>
    <div class="demo demo-3">中心居中</div>
    </body>
    </html>
  7. 中心点偏移
  8. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <title></title>
        <style>
            * {
                padding:0;
                margin:0;
            }
            html,body {
                height:100%;
            }
            .demo {
                width:100px;
                height: 100px;
                text-align: center;
                background:lightblue;
            }
            .demo-1 {
                position: absolute;
                margin: 0 auto;
                left: -88px;
                right: 0;
            }
            .demo-2 {
                position: absolute;
                margin: auto 0;
                top: -30px;
                bottom: 0;
            }
    
            body:before {
                content: '';
                width: 100%;
                border-bottom: 2px dotted blue;
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-2px);
            }
    
            body:after {
                content: '';
                height: 100%;
                border-left: 2px dotted blue;
                position: absolute;
                left: 50%;
                -webkit-transform: translateX(2px);
            }
    
        </style>
    </head>
    <body>
    
    <div class="demo demo-1">水平 距离偏移</div>
    <div class="demo demo-2">垂直 距离偏移</div>
    
    </body>
    </html>

     

posted @ 2015-03-30 10:36 Mr.Leo 阅读(...) 评论(...) 编辑 收藏