CSS中使用負margin值來調(diào)整居中位置
WEB開發(fā)者 發(fā)布時間：2015-07-15 16:23:06 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS中使用負margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下
這或許是最常用的居中方法。如果知道了各個元素的大小，設(shè)置等于寬高一半大小的負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 布局 之 兩端布局的實例代碼 （利用父級負的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級負的margin）的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08
css如何利用負margin技術(shù)實現(xiàn)平均布局
這篇文章主要介紹了css如何利用負margin技術(shù)實現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2020-03-09- 這篇文章主要為大家詳細介紹了css布局之負margin妙用及其他實現(xiàn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了css利用負margin實現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-11-03
