div盒子水平垂直居中的幾種方法

2021-08-23 14:37:31 字數 804 閱讀 3187

一、盒子沒有固定的寬和高

方案1、使用transforms屬性的translate平移

這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。 

我不知道我的高度和寬度是多少。

transform:translate(-50%,-50%):分別向左向上移動自身長寬的50%,使其位於中心。

二、盒子有固定的寬和高

方案1、margin 負間距

1.必需知道該div的寬度和高度,

2.然後設定位置為絕對位置,

3.距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指盒子左上角頂點距離頁面左、上邊界的50%,

4.最後將該div分別左移和上移,使整個盒子居中,左移和上移的大小就是該div(包括border和padding)寬度和高度的一半。

我有固定的寬度和高度。

方案2、margin:auto實現絕對定位元素的居中(該方法相容ie8以上瀏覽器)

此方案**關鍵點:

1、上下左右均0位置定位;

2、margin: auto;

我有固定的寬度和高度。

實現div盒子水平垂直居中的幾種方式

1.第一種方式元素已知寬度高度,絕對定位absolute margin一半 middle background red width 200px height 200px position absolute top 50 left 50 margin left 100px margin top 100...

div盒子水平垂直居中的方法

這個問題比較老,方法比較多,各有優劣,著情使用。一 盒子沒有固定的寬和高 方案1 transforms 變形 這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。內容塊定義transform translate 50 50 必須加上 top 50 left 50 優點 1.內...

div盒子水平垂直居中方法

這個問題比較老,方法比較多,各有優劣,著情使用。一 盒子沒有固定的寬和高 方案1 transforms 變形 這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。內容塊定義transform translate 50 50 必須加上 top 50 left 50 優點 1.內...