元素水平垂直居中（transform，margin，table-cell，jQuery）

最新推荐文章于 2022-12-27 09:45:03 发布

weixin_30569153

最新推荐文章于 2022-12-27 09:45:03 发布

阅读量110

点赞数

原文链接：http://www.cnblogs.com/wishyouhappy/p/3681037.html

版权

1.水平居中

.div{
    margin:0 auto; （或者 margin:auto;）
    width:500px;   
    height:300px;   
}

2.使用margin水平垂直居中

方式一：

.div {
    text-align: center;
    line-height: 200px;
    border: 2px pink solid;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}

方式二：

<!DOCTYPE html>
<html>
    <head>
        <title>块级元素水平，垂直居中</title>
        <meta charset="utf-8">
        <style>
            .wrapper {
                height: 600px;
                border: 1px solid gray;
            }
            .box {
                width: 100px;
                height: 100px;
                background: gold;
                margin: 250px auto;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
</html>

3.jquery实现DIV水平垂直居中

.div {
    text-align: center;
    line-height: 200px;
    border: 2px pink solid;
    width: 300px;
    height: 200px; 
}

< script >
$(window).resize(function(){ 
    $(".div").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".div").outerWidth())/2, 
        top: ($(window).height() - $(".div").outerHeight())/2 
    });   
}); 

$(function(){ 
    $(window).resize(); 
}); 
< /script >

4.使用css3 tansform属性

<!DOCTYPE html>
<html>
    <head>
        <title>块级元素水平，垂直居中</title>
        <meta charset="utf-8">
        <style>
            .wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
            }
            .box {
                position:relative;
                height:200px;
                width:200px;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                background:#abcdef;

            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">adfagagafajkfhla</div>
        </div>
    </body>
</html>

效果如下：

单独设置垂直居中可使用：

top:50%;
tansfrom:translateY(-50%);

单独使用水平居中可使用：

left:50%;
tramsform:translateX(-50%);

5.table-cell

注意：可能会破坏页面整体布局

<!DOCTYPE html>
<html>
    <head>
        <title>块级元素水平，垂直居中</title>
        <meta charset="utf-8">
        <style>
            .wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;

            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">adfagagafajkfhla</div>
        </div>
    </body>
</html>

效果如下：

6.使用示例：DIV创建水平垂直居中遮罩层

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
<title></title>
<style>
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

#win {
   position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
    background: #fff;
    margin: -102px 0 0 -202px;
    line-height: 200px;
    text-align: center;
    border: 4px solid #CCC;

}
</style>
</head>
<body>
    <div id="overlay" ></div >
    <div id="win" >
        Div层居中
    </div >
</body>
</html>