這或許是最常用的居中方法。如果知道了各個元素的大小,設定等於寬高一半大小的負margin值(如果沒有使用box-sizing: border-box樣式,還需要加上padding值),再配合top: 50%; left: 50% ;樣式就會使塊元素居中。
要注意的是,這是按照預想情況也能在工作在IE6-7下的唯一方法。
CSS Code複製內容到剪貼板
.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 */ }
好處注意:
這是非響應式的方法,不能使用百分比的大小,也不能設定min-/max-的最大值最小值。
內容可能會超出容器