不固定高度和寬度的div，水平和垂直居中

時間 2019-12-12

標籤固定高度寬度 div 水平垂直居中欄目 CSS 简体版

原文原文鏈接

不固定高度和寬度的div，水平和垂直居中

在寫頁面時，常常會遇到一個不固定高度和寬度的div，但又要水平或者垂直居中，有點XXcss

水平居中

對於水平居中，我知道的有2個辦法，根據具體狀況來選擇html

第一個是父元素的寬高固定，子元素設置成塊（display:block;）,而後利用外邊距（margin:0 atuo;）來水平居中

具體代碼以下spa

//css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
    }
    .mid{
        margin: 0 auto;
        background-color: #cccccc;
        height: 50px;
        width: 50px;

    }
</style>

//html
<body>
    <div class="container">
        <div class="mid">
        </div>
    </div>
</body>

第二個是父元素的寬高固定，父元素添加css(text-align: center;)，子元素設置成行內元素（display:inline-block;）

具體代碼以下code

//css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
        text-align: center;
    }
    .mid{
        background-color: #cccccc;
        height: 50px;
        width: 50px;
        display: inline-block;

    }
</style>

//html
<body>
    <div class="container">
        <div class="mid">
        </div>
    </div>
</body>

垂直居中

對於垂直居中，要用到（vertical-align:middle;），並且還要用到一個輔助的元素htm

父元素不變，子元素1設置成行內元素並添加（vertical-align:middle;），另外在加一個同級子元素2，用來撐開子元素1

具體代碼以下class

//css
<style>
    .container{
        height: 300px;
        border: 1px solid #cccccc;
    }
    .mid{
        background-color: #cccccc;
        height: 50px;
        width: 50px;
        vertical-align:middle;
        display:inline-block;

    }
    .mid-hack {
        display: inline-block;
        font-size: 0;
        height: 100%;
        vertical-align: middle;
        width: 0;
    }
</style>

//html
<body>
    <div class="container">
        <div class="mid">
        </div>
        <div class="mid-hack">
        </div>
    </div>
</body>

固然確定還有其餘辦法，有知道的歡迎指點hack

相關標籤/搜索

每日一句

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