css裡上下居中怎麼弄？

css上下居中的實作方法：1、將單行的行內元素設定行高等於盒子高；2、將多行的行內元素使用給父元素設定「display:table-cell;和vertical- align: middle;」即可。

css裡上下居中也就是垂直居中，css中按元素可以分為三種垂直居中方式，分別是單行的行內元素，多行的行內元素以及塊元素的垂直居中，以下將做詳細介紹。

單行的行內元素

只需要設定單行行內元素的"行高等於盒子的高"即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

效果：

多行的行內元素

使用給父元素設定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">

    我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素

效果：

# 區塊級元素

#方案一：使用定位

先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50%，也就是讓子元素的左上角垂直居中；

定高度：設定絕對子元素的margin-top: -元素高度的一半px; 或設定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">我是块级元素</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">我是块级元素</div>
</div>

###效果：##################方案二：使用flexbox佈局實作（高度定不定都可以）############使用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">我是块级元素</div>
</div>

###效果： ###############相關教學：###CSS影片教學######

以上是css裡上下居中怎麼弄？的詳細內容。更多資訊請關注PHP中文網其他相關文章！