如何讓DIV在視窗水平和垂直居中

2021-09-08 10:45:21 字數 911 閱讀 1954

本例項以新文件開始

先放置乙個div,並且設定class名為aa,賦予它css屬性:

width:0;height:0;position:fixed;left:50%;rigth:50%;top:50%;bottom:50%; 3

在.aa中放置乙個div,並且設定class名為aaa,賦予它必要的css屬性:

width:600px;height:220px;margin-left:-300px;margin-top:-110px

(這裡的各個屬性根據需要自己設定;總之margin-left要為width一半的負值;margin-top要為height一半的負值)

這個div就是你要放內容的層

接下來要加上內容,要做到如下效果

繼續設定.aaa的css屬性:

color:#fff;font-size:40px;font-family:"comic sans ms", cursive;text-align:center;line-height:220px

(要讓文字垂直居中只要設定line-height值為:這個層的height減去padding除以文字的行數所得數值)

儲存後,預覽就完成了

如何讓DIV水平和垂直居中

css讓div水平居中 說明,本文中所指的div包括html頁面中所有的元素。讓乙個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。mydiv 但是如果要使div垂直方向也居中,恐怕css需要修改了。c...

如何讓DIV水平和垂直居中 宿雪家的小鎮 新浪部落格

css讓div水平居中 說明,本文中所指的div包括html頁面中所有的元素。讓乙個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。mydiv 但是如果要使div垂直方向也居中,恐怕css需要修改了。c...

使用絕對定位 負外邊距讓DIV層水平垂直居中頁面

讓乙個層水平垂直居中是乙個非常常見的布局方式,但在htmlpvthddyexx中水平居中使用margin 0px auto 可以實現,但垂直居中使用外邊距是無法達到效果的。頁面設定height 100 是無效的 這裡使用絕對定位 負外邊距的方式來實現垂直居中,但同時要考慮頁面重置大小的情況,需要使用...