首頁 > web前端 > css教學 > 如何在 Div 中垂直居中內容?

如何在 Div 中垂直居中內容?

Linda Hamilton
發布: 2024-11-28 05:58:10
原創
507 人瀏覽過

How to Vertically Center Content Within a Div?

定義的Div 尺寸內的內容垂直對齊

可以透過多種方法實現在指定寬度和高度的div 內垂直居中內容。讓我們來探索一些流行的選項:

1。顯示:父 Div 的 Table-Cell

將父 div 的顯示設為 table-cell 並在子內容上使用 Vertical-align: middle 允許垂直居中。

2.顯示:屏蔽與顯示:Table-Cell

將父級div的顯示設為屏蔽,子級內容顯示為table-cell ,效果類似。

3.浮動父div 和顯示:表格單元格

浮動父div 並將子內容的顯示設為表格單元格也會導致垂直居中。

4. Position:relative 和position:absolute

將父div的位置設為相對,子內容的位置設為絕對,top設定為50%,margin-top設定為-50%,可以實現垂直居中實現了。不過這種方法需要針對不同高度場景進行手動調整。

以上是如何在 Div 中垂直居中內容?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板