溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎樣使用CSS實現(xiàn)盒子水平垂直居中

發(fā)布時間：2021-03-16 15:44:43 來源：億速云 閱讀：157 作者：小新 欄目：web開發(fā)

小編給大家分享一下怎樣使用CSS實現(xiàn)盒子水平垂直居中，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

原始代碼：

center.html：

<!DOCTYPE html>
<html lang="Zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center</title>
    <link rel="stylesheet" href="center.css">
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

center.css：

body {
    background-color: #6ed0ff;
}

.father {
    background-color: #be33ec;
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0, 0, 0);
    margin: 100px auto;
    width: 300px;
    height: 300px;
}

.son {
    background-color: #fcff00;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    width: 100px;
    height: 100px;
}

原始效果：

怎樣使用CSS實現(xiàn)盒子水平垂直居中

實現(xiàn)子盒子相對于父盒子垂直居中效果：

怎樣使用CSS實現(xiàn)盒子水平垂直居中

1. grid

.father {
    display: grid;
}

.son {
    align-self: center;
    justify-self: center;
}

2. absolute + 負(fù)margin

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

3. absolute + transform

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

4. absolute + margin: auto

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

5. flex

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

6. margin+transfrom

.father {
    overflow: hidden;
}

.son {
    margin: 50% auto;
    transform: translateY(-50%);
}

7. table-cell

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.son {
    display: inline-block;
}

8. inline-block + vertical-align

.father {
    text-align: center;
    line-height: 300px;
}

.son {
    display: inline-block;
    vertical-align: middle;
}

以上是“怎樣使用CSS實現(xiàn)盒子水平垂直居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手