水平垂直居中

1.利用绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>水平垂直居中</title>
        <style>
            .center{  
               position:absolute;  
               top:50%;  
               left:50%;  
               width:100px;  
               height:30px;  
               margin-top: -15px;
               margin-left: -50px;
               border:1px solid red;  
               text-align:center; 
               background: red; 
            }  
        </style>
    </head>
    <body>
        <div class="center">垂直水平居中</div>
    </body>
</html>

top与left设为50%，margin-left为宽度一半的负值，margin-top为高度一半的负值

此方法最常见，但仅仅适用于已知宽高的情况下。

2.绝对定位结合transform

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>水平垂直居中</title>
        <style>
            .center{  
               position:absolute;  
               top:50%;  
               left:50%;  
               width:100px;  
               height:30px;  
               -webkit-transform: translate(-50%, -50%);
               -webkit-transform: translate(-50%, -50%);
               -ms-transform: translate(-50%, -50%);
               transform: translate(-50%, -50%);
               border:1px solid red;  
               text-align:center; 
               background: red; 
            }  
        </style>
    </head>
    <body>
        <div class="center">垂直水平居中</div>
    </body>
</html>

可在未知宽高时使用，但在IE8及以前的浏览器内不支持，且内部文本可能因为移动而稍显模糊，这是因为transform对象的宽高不是偶数，50%位移后产生了小数。

3.利用flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>水平垂直居中</title>
        <style>
            .cont-center {
                height: 500px;
                -webkit-display: flex;
                -moz-display: flex;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .center{  
               width:100px;  
               height:30px;  
               background: red;
            }  
        </style>
    </head>
    <body>
        <div class="cont-center">
            <div class="center">垂直水平居中</div>
        </div>
    </body>
</html>

IE11以下不支持justify-content、align-items等属性

4.利用ifc布局，即空的img或者伪元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>水平垂直居中</title>
        <style>
            .cont-center {
                height: 500px;
                text-align: center;
                font-size: 0;
                -webkit-text-size-adjust: none;
            }
            .center{  
               width:100px;  
               height:30px;  
               font-size: 15px;
               background: red;
               vertical-align: middle;
               display: inline-block;
            }  
            .cont-center:after {
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="cont-center">
            <div class="center">垂直水平居中</div>
        </div>
    </body>
</html>

5.利用calc

根据雅虎的35个前端优化法则，并不提倡使用calc，略过。

posted @ 2017-10-04 15:12 炎泽阅读(192) 评论(0) 收藏举报

刷新页面返回顶部

炎泽

水平垂直居中

公告