首頁 > web前端 > css教學 > css中如何讓div居中

css中如何讓div居中

藏色散人
發布: 2023-01-05 16:10:46
原創
48099 人瀏覽過

css中讓div居中的方法:1.對div使用絕對佈局「position:absolute;」;2、對div使用絕對佈局並把top和left的值都設定為50%;3、透過css3的transform屬性實現div居中。

css中如何讓div居中

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

XHTML網站設計標準中,不再使用表格定位技術,而是採用css div的方式實現各種定位。下面我們來看幾種css設定div居中的方法。

方法一:對div使用絕對佈局position:absolute;並設定top,left,right,bottom的值相等,但不一定都等於0;並且設定margin:auto。

css中如何讓div居中

方法二:這個方法要知道div的寬度和高度。對div使用絕對佈局position:absolute;並把top和left的值都設定為50%;50%就是指頁面視窗的寬度和高度的50%;最後將div左移和上移,左移和上移的大小為div寬度和高度的一半。

css中如何讓div居中

其中margin-left:-100px 和margin-top:-100px 可以寫成margin:-100px 0px 0px -100px

【推薦學習:css影片教學

方法三:div使用絕對定位position:absolute,並且設定left和top的值都為50%。使用css3的transform屬性。 transform:translate(-50%,-50%)。

css中如何讓div居中

以上3種方法的效果如下顯示

css中如何讓div居中

#若有兩個div,裡面小的div相對於外面大的div水平垂直居中對齊,有以下幾種方法。

  • 利用position和margin:auto實作。父元素設定position:relative;子元素設定position:absolute,並設定top,left,right,bottom值相等。

css中如何讓div居中

  • 使用position。父元素設定position:relative;子元素設定position:absolute。並設定top和left為50%,並設定左移和上移為子元素的大小的一半。

css中如何讓div居中

  • 使用display:flex。這種方法需要設定瀏覽器的兼容性。

css中如何讓div居中

  • 使用transform:translate()。父元素設定position:relative;子元素設定position:absolute。並設定top和left為50%。最後設定transform:translate(-50%,-50%)。

css中如何讓div居中

以上四種方法的效果圖如下顯示

css中如何讓div居中

以上是css中如何讓div居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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