CSS中使用負(fù)margin值來調(diào)整居中位置
WEB開發(fā)者 發(fā)布時間:2015-07-15 16:23:06 作者:佚名
我要評論

這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下
這或許是最常用的居中方法。如果知道了各個元素的大小,設(shè)置等于寬高一半大小的負(fù)margin值(如果沒有使用box-sizing: border-box樣式,還需要加上padding值),再配合top: 50%; left: 50%;樣式就會使塊元素居中。
需要注意的是,這是按照預(yù)想情況也能在工作在IE6-7下的唯一方法。
CSS Code復(fù)制內(nèi)容到剪貼板
- .is-Negative {
- width: 300px;
- height: 200px;
- padding: 20px;
- position: absolute;
- top: 50%; left: 50%;
- margin-left: -170px; /* (width + padding)/2 */
- margin-top: -120px; /* (height + padding)/2 */
- }
好處:
瀏覽器兼容性非常好,甚至支持IE6-7
需要的編碼量很少
同時注意:
這是個非響應(yīng)式的方法,不能使用百分比的大小,也不能設(shè)置min-/max-的最大值最小值。
內(nèi)容可能會超出容器
需要為padding預(yù)留空間,或者需要使用box-sizing: border-box樣式。
相關(guān)文章
css 布局 之 兩端布局的實例代碼 (利用父級負(fù)的margin)
這篇文章主要介紹了css 布局 之 兩端布局 (利用父級負(fù)的margin)的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08css如何利用負(fù)margin技術(shù)實現(xiàn)平均布局
這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實現(xiàn)平均布局,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一2020-03-09css布局之負(fù)margin妙用及其他實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了css布局之負(fù)margin妙用及其他實現(xiàn)的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07css利用負(fù)margin實現(xiàn)平均布局的示例
這篇文章主要介紹了css利用負(fù)margin實現(xiàn)平均布局的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2020-11-03