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">我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素我是多行的行內元素
效果：
# 區塊級元素
#方案一：使用定位
定高度：設定絕對子元素的margin-top: -元素高度的一半px; 或設定transform: translateY(-50%);不定高度：利用css3新增屬性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>登入後複製
<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><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裡上下居中怎麼弄？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
