實現DIV居中的幾種方法

本文轉載自查看原文 2016-08-24 11:20 66908 CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
        </style>

        <div class="div1">
            <div class="div2">

            </div>
        </div>

    </body>
</html>

如上的兩個div，實現div2在div1里面是居中顯示

一、方法一

　　利用margin，div1的寬減去div2的寬就是div2margin-left的數值：（100-40）/2=30

　　div1的高減去div2的高就是div2margin-top的數值：（100-40）/2=30

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}

            .div22{
                margin-left: 30px;margin-top: 30px;
            }
        </style>

        <div class="div1">
            <div class="div2 div22">

            </div>
        </div>

    </body>
</html>

二、方法二

　　利用css的 position屬性，把div2相對於div1的top、left都設置為50%，然后再用margin-top設置為div2的高度的負一半拉回來，用marg-left設置為寬度的負一半拉回來，css如下設置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{
                position: relative;
            }
            .div22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">

            </div>
        </div>

    </body>
</html>

三、方法三

　　還是用css的position屬性，如下的html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{
                position: relative;
            }
            .div22{
                position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">

            </div>
        </div>

    </body>
</html>

四、方法四

　　利用css3的新增屬性table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}

            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">
            </div>
        </div>

    </body>
</html>

這個方法還有一個好處就是，div2的高度可以不固定，如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; background-color: green;}

            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>

        <div class="div1 div11">
            <div class="div2 div22">
               div居中方法
            </div>
        </div>

    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 DIV居中的幾種方法《讓DIV盒子居中的幾種方法》讓div水平垂直居中的幾種方法讓DIV水平和垂直居中的幾種方法實現居中的幾種方法讓div在屏幕中居中（水平居中+垂直居中）的幾種方法元素居中的幾種方法純CSS實現垂直居中的幾種方法 [轉]移動端實現垂直居中的幾種方法 CSS實現垂直居中的幾種方法