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

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

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

原始代碼：

center.html：





    
    
    Center

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實(shí)現(xiàn)盒子水平垂直居中

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

怎樣使用CSS實(shí)現(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實(shí)現(xiàn)盒子水平垂直居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：怎樣使用CSS實(shí)現(xiàn)盒子水平垂直居中-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/ddsppc.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管