css里上下居中如何實(shí)現(xiàn)

css里上下居中如何實(shí)現(xiàn)？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

css里上下居中也就是垂直居中，css中按元素可以分為三種垂直居中方式，分別是單行的行內(nèi)元素，多行的行內(nèi)元素以及塊元素的垂直居中。。

單行的行內(nèi)元素

只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是單行的行內(nèi)元素</span>
</div>

效果：

多行的行內(nèi)元素

使用給父元素設(shè)置display:table-cell;和vertical-align: middle;即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">

<span id="son">我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素</span>

</div>

效果：

塊級(jí)元素

方案一：使用定位

首先設(shè)置父元素為相對(duì)定位，再設(shè)置子元素為絕對(duì)定位，設(shè)置子元素的top: 50%，即讓子元素的左上角垂直居中；

定高度：設(shè)置絕對(duì)子元素的 margin-top: -元素高度的一半px; 或者設(shè)置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是塊級(jí)元素</div>
</div>

不定高度：利用css3新增屬性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是塊級(jí)元素</div>
</div>

效果：

方案二：使用flexbox布局實(shí)現(xiàn)（高度定不定都可以）

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是塊級(jí)元素</div>
</div>

效果：

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css里上下居中如何實(shí)現(xiàn)大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。