怎樣使用CSS實現(xiàn)盒子水平垂直居中-創(chuàng)新互聯(lián)

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、城西網(wǎng)站維護(hù)、網(wǎng)站推廣。

原始代碼：

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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：怎樣使用CSS實現(xiàn)盒子水平垂直居中-創(chuàng)新互聯(lián)
URL地址：http://www.muchs.cn/article32/ddsppc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站導(dǎo)航、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容