CSS中应用负margin值来调剂垂直居中部位

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

这也许是最常见的垂直居中方式。假如了解了各个元素的尺寸,设定等于宽高1半尺寸的负margin值(假如沒有应用box-sizing: border-box款式,还必须再加padding值),再相互配合top: 50%; left: 50%;款式就会使块元素垂直居中。

必须留意的是,这是依照料想状况也能在工作中在IE6⑺下的唯1方式。

CSS Code拷贝內容到剪贴板
  1. .is-Negative {       
  2.         width300px;       
  3.         height200px;       
  4.         padding20px;       
  5.         positionabsolute;       
  6.         top: 50%; left: 50%;       
  7.         margin-left: -170px/* (width + padding)/2 */      
  8.         margin-top: -120px/* (height + padding)/2 */      
  9. }      

  益处:

    访问器适配性十分好,乃至适用IE6⑺
    必须的编号量非常少

  另外留意:

    这是个非回应式的方式,不可以应用百分比的尺寸,也不可以设定min-/max-的最大值最少值。
    內容将会会超过器皿
    必须为padding预留室内空间,或必须应用box-sizing: border-box款式。