这也许是最常见的垂直居中方式。假如了解了各个元素的尺寸,设定等于宽高1半尺寸的负margin值(假如沒有应用box-sizing: border-box款式,还必须再加padding值),再相互配合top: 50%; left: 50%;款式就会使块元素垂直居中。
必须留意的是,这是依照料想状况也能在工作中在IE6⑺下的唯1方式。
CSS Code拷贝內容到剪贴板
- .is-Negative {
- width: 300px;
- height: 200px;
- padding: 20px;
- position: absolute;
- top: 50%; left: 50%;
- margin-left: -170px;
- margin-top: -120px;
- }
益处:
访问器适配性十分好,乃至适用IE6⑺
必须的编号量非常少
另外留意:
这是个非回应式的方式,不可以应用百分比的尺寸,也不可以设定min-/max-的最大值最少值。
內容将会会超过器皿
必须为padding预留室内空间,或必须应用box-sizing: border-box款式。