如何讓乙個div居於頁面正中間

2022-08-03 07:27:09 字數 1005 閱讀 6531

如何讓乙個div居於頁面中間,我今天說的是讓乙個div水平居中同時垂直居中,而不是簡單的top:50%,left:50%。當然,我們就按一開始的思路寫一下:top,left屬性都設為50%,看一下效果。

從我的截圖可以看出,div的左頂點剛好在頁面的中心點處。現在的思路是,如何移動div然後讓div的中心和頁面中心重合,即可達到我們一開始想要的結果。在這裡我要介紹一種方法,使用css的transform屬性。由於這個屬性的值很多,我這裡就不一一介紹,只是說一下它的translate。我們給剛才的center-in-center類加上translate(0,-50%)

如果使用過這個屬性,應該知道怎麼回事了。translate(0, -50%),第乙個值是指水平移動量,和tansform的translatex效果一樣,第二個值那就是垂直方向偏移量,但為負數時,代表反方向移動。現在我們只需tanslate(-50%,-50%)就可以達到div既水平居中同時垂直居中。

附上完整**與效果

說多兩句,這也可以是一道非常不錯的面試題,大家可以留意一下。當然還有其他解法,這裡就不再班門弄斧了。另外,css3的transform是乙個非常強大的屬性,可以做很多變換3d之類的炫酷效果,如果有興趣可以深入研究一下。但前端有乙個不得不說的痛,瀏覽器相容性問題。。。其他的瀏覽器還好說,萬惡的ie,ie9支援一小部分屬性,ie9以下全部不支援。如果還深愛著ie,那只能另闢蹊徑,甚至不惜用js去解決咯!

如何讓乙個div居於頁面正中間 實現方法

如何讓乙個div居於頁面中間,我今天說的是讓乙個div水平居中同時垂直居中,而不是簡單的top 50 left 50 當然,我們就按一開始的思路寫一下 top,left屬性都設為50 看一下效果。j ascript code複製內容到剪貼簿 從我的截圖可以看出,div的左頂點剛好在頁面的中心點處。現...

讓乙個div居於頁面中間,水平居中同時垂直居中

兩種方式 doctype html html lang en head meta charset utf 8 title div居於頁面正中間 title style type text css div 1.如果已知高寬的情況下,單純的只是距中 center in center 的左頂點剛好在頁面的...

android 讓乙個控制項按鈕居於底部的幾種方法

android 讓乙個控制項按鈕居於底部的幾種方法 1.採用linearlayout布局 android layout height 0dp android layout weight 1 2.採用relativelayout布局 android layout alignparentbottom t...