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

如何在 CSS 中垂直居中 Div?

Patricia Arquette
發布: 2024-12-11 04:28:09
原創
995 人瀏覽過

How to Vertically Center a Div in CSS?

用margin:auto 將Div 垂直居中

而margin:O auto;水平居中div,margin:auto auto;不垂直居中。不幸的是,vertical-align:middle;也不適用於像 div 這樣的區塊級元素。

限制:

  • vertical-align:middle;: 不適用於區塊級元素。
  • margin-top:auto 和margin-bottom:auto: 計算值為零。
  • margin-top:-50%;: 基於百分比的邊距值是基於包含區塊的寬度。

垂直居中解決方法:

由於文檔流和元素高度計算的性質,不可能在父元素內使用邊距進行垂直居中。但是,這些解決方法可以解決該問題:

嵌套元素方法:

這需要嵌套三個元素,如下所示:

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

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