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

2022-08-29 19:03:09 字數 923 閱讀 7004

父盒子是position:relative

方法一:(寬高確定)

div絕對定位水平垂直居中【margin 負間距】,

方法二:(寬高確定)

div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】,

相容性:,ie7及之前版本不支援

方法三:(寬高不定)

div絕對定位水平垂直居中【transforms 變形】

相容性:ie8不支援;

方法四:(寬高不定)

flex布局(對父元素display:flex)

方法五:

父盒子display: table-cell和子盒子display: inline-block(寬高不定)

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

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

div盒子水平垂直居中方法

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

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

一 盒子沒有固定的寬和高 方案1 使用transforms屬性的translate平移 這是最簡單的方法,不僅能實現絕對居中同樣的效果,也支援聯合可變高度方式使用。我不知道我的高度和寬度是多少。transform translate 50 50 分別向左向上移動自身長寬的50 使其位於中心。二 盒子...