css之元素居中

LinMeng 56 1 1

行内元素居中

文本垂直居中
单行文本垂直居中

设置line-height与盒子高度一样就行 这里有一个误区,我经常在设置单行文本居中的时候,会习惯性的设置height属性与lin-height属性一样,其实完全没必要,只设置line-height就行,这时候盒子的高度由line-height撑起来,与height完全相同。

多行文本垂直居中
  1. vertical-align vertical-align 可以指定行内元素的垂直对其方式
    <div class="box">
     <div class="center">
          秀色湖光照大地,照亮我也照亮你        
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     line-height: 200px;
     width: 300px;
    }
    .center {
     background-color: green;
     line-height: 20px;
     display: inline-block;
     vertical-align: middle;
    }
    </style>
    这个方法需要多增加一个标签(.box)将需要居中的内容包裹起来。设置父元素的line-height为元素的高度,居中子元素.center的display为inline-block,使其拥有行内元素的特性,因为line-height的继承性,所以设置line-height: 20px;重置居中子元素的line-height,然后设置vertical-align: middle;在行框盒子内垂直居中对齐。
  2. table-cell 不同于行内元素设置利用vertial-align会使当前元素垂直居中对齐,table-cell元素设置vertial-align会让它的子元素垂直居中对齐,就算子元素是块级元素也会垂直对齐,所以想要实现块级元素的垂直居中也可以使用这个方法。
    .box {
       height: 200px;
        display: table-cell;
        vertical-align: middle;
    }

    行内元素水平居中

    text-align控制行内元素的水平对齐方式,其值有left,center,right.

    块级元素水平居中

    margin的值为auto可以占据对应方向的所有剩余方向,如果设置水平方向上两个方向的margin值都为auto,两个方向就会平分剩余空间,从而实现居中。 但是我们从来没有使用这个方法来实现垂直方向的居中呢?因为auto值起作用有一个前提条件,就是在对应的方向上如果不设置具体的长度,会自动铺满。显然,只有width属性时可以铺满父元素的。

    块级元素垂直居中

    那可不可以利用margin:auto实现垂直方向的居中呢?也是有办法的,我们可以通过修改writing-mode属性改变块的流动,使块横向流动,此时height方向就会像width一样默认平铺撑满,这是设置margin:auto就可以实现垂直方向上的居中。但是这样做有个副作用,因为writing-mode属性的可继承性,会导致该元素下的所有子元素全部的流方向都变为横向。此时水平方向不能再使用此方法实现居中了。
    <div class="box">
     <div class="center"> 
         从此烟雨落京城,一人撑伞两人行。
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     height: 200px;
     writing-mode: vertical-lr;;
    }
    .center {
     background-color: green;
     height: 50px;
     margin: auto 0;
    }
    </style>

    水平垂直居中

  3. position(居中元素固定宽高) 设置父元素绝对定位,需要居中的元素相对定位,top,right,bottom,left的值都为0,此时如果不设置具体的宽高,居中元素就会在水平和垂直两个方向上都铺满元素,给需要居中的元素设置宽高配合margin:auto,就可以实现绝对居中了。

注意,只兼容IE8以上 2. vertical-align

  • 先实现居中元素在水平方向上的居中,设置居中元素的display属性为inline-block,使其拥有行内元素的特性,给外层的父元素设置text-align:center;使居中元素在水平方向上居中
  • 再实现在垂直方向上的居中,这个方法需要添加一个辅助元素,设置辅助元素height:100%;使当前盒子的高度撑满父元素,然后设置vertical-align:middle,使其在垂直方向上居中对齐。
    <div class="box">
     <div class="assist"></div>
     <div class="center"> 
         他朝若是同淋雪,此生也算共白头。
     </div>
    </div>
    <style>
    .box {
     background-color: orange;
     height: 200px;
     width: 500px;
     text-align: center;
    }
    .center {
     background-color: green;
     width: 150px;
     display: inline-block;
     vertical-align: middle;
    }
    .assist {
     display: inline-block;
     height: 100%;
     vertical-align: middle;
    }
    </style>
    1. position配合margin 这个方法适用与居中元素宽高已知的情况。设置父元素相对定位,居中元素绝对定位,left、top值都为50%,left、top的值分别相对于父元素的宽高计算,此时居中元素的左上顶点会位于父元素的正中央。然后再设置居中元素的margin-left、margin-top为宽高的负一半,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
      <div class="box">
      <div class="center"> 
        梅须逊雪三分白,雪却输梅一段香。
      </div>
      </div>
      <style>
      .box {
      background-color: orange;
      height: 200px;
      width: 500px;
      position: relative;
      }
      .center {
      background-color: green;
      width: 150px;
      height: 50px;
      position:absolute;
      top:50%;
      left:50%;
      margin-left: -75px;
      margin-top: -25px;
      }
      </style>
    2. position配合transform 第四种方法是使用position配合transform。这种方法跟上一个方法原理上基本相似,但使用场景增加了宽高不固定的元素。一样的先设置父元素相对定位,居中元素绝对定位,left、top值都为50%。再设置居中元素transform: traslate(-50%, -50%);,translate的百分比值是相对于自身去计算的,让居中元素在水平方向相对于自身宽度的50%向左偏移,在垂直方向向上偏移相对于自身高度的50%,就可以实现居中效果了。
      <div class="box">
      <div class="center"> 
        现在我才听说,你当初找过我,我能想象你当时有多难过。
      </div>
      </div>
      <style>
      .box {
      background-color: orange;
      height: 200px;
      width: 500px;
      position: relative;
      }
      .center {
      background-color: green;
      width: 150px;
      position:absolute;
      top:50%;
      left:50%;
      transform: traslate(-50%, -50%);
      }
      </style>
    3. flex 如果不需要考虑兼容IE9及以前的浏览器,flex是较好的方式。 设置父元素为flex容器,主轴、交叉轴对齐方式都为居中对。
      .box {
      display: flex;
      align-items: center;
      justify-content: center;
      }
预览图
收藏
评论区