css垂直居中方法總結

時間 2019-11-08

標籤 css 垂直居中方法總結欄目 CSS 简体版

原文原文鏈接

　　在網頁佈局中，咱們每每會遇到下圖所示的場景，讓小圖標和文字對齊javascript

　　可能有的小夥伴會說，這個簡單，直接給小圖標設置左浮動來實現。css

　　這樣作是能夠的，但不推薦，畢竟浮動是會影響佈局的，能少用仍是少用。html

　　之前遇到這種場景，其實挺頭疼的，我是直接給小圖標設置相對定位，而後調整top值。好像找不到更好的辦法，也就沒去管了。java

　　直到後來偶然看了張鑫旭大神關於vertical-align屬性的視頻講解，感受發現了新大陸。jquery

　　下面總結了2種方法，只須要一句代碼便可解決（強烈推薦第二種）瀏覽器

　　①：給小圖標加上　vertical-align:middle;ssh

　　之前由於IE6,7對該屬性不支持，因此還要使用csshack，ide

　　如今主流瀏覽器都已經很好的支持了，並且誰還管萬惡的低版本IE瀏覽器兼容喔（eat shift）佈局

　　②：給小圖標加上　vertical-align:-2px;（這裏的負值根據你的狀況自行設置，這種方法沒有兼容性問題）spa

　　注：若是當你遇到第一種方法用了沒有效果或者用着很不開心的時候，強烈推薦使用第二種方法

　　順便總結了一些其它小技巧，懼怕本身之後忘記，也但願幫到有須要的小夥伴

　　問題1：怎麼讓定位元素垂直居中的三種方法？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div01 {
                width:200px;
                height:200px;
                background-color:#6699FF;
                position:absolute;
                margin: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
            <div class="div01"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div01 {
                width:200px;
                height:200px;
                background-color:#6699FF;
                position:absolute;
                top:50%;
                left:50%;
                margin-top: -100px;
                margin-left: -100px;
            }
        </style>
    </head>
    <body>
            <div class="div01"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定位元素居中</title>
        <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
    .div{
        width: 500px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 50%;
        top:50%;
        margin: -150px 0px 0px -250px;
    }
    </style>
    <body>
            <div class="div"></div>
    </body>
</html>

　　注：上面三種都是在知道具體寬高的狀況下，若是不知道元素寬高怎麼讓其垂直居中呢？（利用transform屬性）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

    <body>
        <img src="img/1.jpg" />
    </body>

</html>

　　問題2：怎麼讓文字垂直居中？

　　(給一個空標籤，而後給空標籤設置display:inline-block;height:100%;width:1px;vertical-align:middle;）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文字垂直居中</title>
        <style type="text/css">
            .test {
                width: 500px;
                padding: 10px;
                border: 1px solid red;
                text-align: center;
            }
            
            .test div {
                display: inline-block;
                padding: 3px;
                width: 200px;
                border: 1px solid #CCCCCC;
            }
            
            .test span {
                display: inline-block;
                height: 100%;
                width: 1px;
                vertical-align: middle;
            }
        </style>
    </head>

    <body>
        <!--用一個高度100% 寬1px display: inline-block 的空標籤 而後使用vertical-align: middle; 就能夠在高度不固定的狀況下 自動居中-->

        <div class="test">
            <div>
                青青園中葵，朝露待日晞。 陽春佈德澤，萬物生光輝。 常恐秋節至，焜黃華葉衰。 百川東到海，什麼時候復西歸？ 少壯不努力，老大徒傷悲。青青園中葵，朝露待日晞。 陽春佈德澤，萬物生光輝。 常恐秋節至，焜黃華葉衰。 百川東到海，什麼時候復西歸？ 少壯不努力，老大徒傷悲。
            </div>
            <span></span>
        </div>

    </body>

</html>

　　問題3：怎麼讓一個塊元素水平居中，塊元素裏的文字也水平居中？

　　給這個塊元素設置一個固定寬度，而後加上margin:0 auto;　在給裏面的元素設置text-align:center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .main {
                width: 400px;
                margin: 0 auto;
                background-color: chocolate;
            }
            .main p {
                color: #fff;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <p>珍愛生命，遠離IE</p>            
        </div>
    </body>
</html>

　　補充：最簡單的實現左邊定寬，右邊自適應佈局（給左邊設置固定寬度，而後加浮動；右邊設置寬度百分百，不加浮動）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
                color: #fff;
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                box-sizing: border-box;
            }
            
            aside {
                float: left;
                width: 200px;
                height: 200px;
                line-height: 200px;
                background: #5A6A94;
            }
            
            section {
                width: 100%;
                height: 200px;
                line-height: 200px;
                background: #BE4F4F;
            }
        </style>
    </head>

    <body>
        <!-- 左邊定寬 -->
        <aside class="left">Left</aside>
        <!-- 右邊自適應 -->
        <section class="right">Right</section>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。