美文网首页
CSS: <垂直居中> 方案解析

CSS: <垂直居中> 方案解析

作者: 奔云 | 来源:发表于2019-10-21 16:08 被阅读0次

    导引:

    方案一 { keyword: padding & margin }
    方案二 { keyword: vertical-align }
    方案三 { keyword: absolute | relative }
    方案四 { keyword: flex }
    方案五(文字垂直居中) { keyword: text-align | line-height }


    方案一{ keyword: padding & margin }

    提要简介: 运用 padding(父容器) + margin (子元素) + text-align:center;(父容器的子元素是内联元素时)

    应用场景一:

    1. 父元素 和 子元素 都是 块级元素
    2. 父元素 宽度(可定也不不定), 高度不定.
    <!-- html -->
    <div class="parent">
         <div class="son"></div>
       </div>
    
    /* css */
    .parent {
      background: #ddd;
      width: 300px;
      padding: 40px 0;  /* 父容器用padding挤压子元素 实现子元素垂直居中 */
    }
    .son {
      width: 50px;
      height: 50px;
      background: red;
      margin: 0 auto; /* 块级子元素 水平居中 */
    }
    

    示图:

    11111.png

    应用场景二:

    1. 父元素是块级元素, 子元素为内联元素
    2. 父元素 宽度(可定可不定), 高度不定.
    <!-- html -->
    <div class="parent">
         <span>x</span>
       </div>
    
    /* css */
    .parent {
      background: #ddd;
      width: 300px;
      text-align: center; // 使父容器内的 内联元素水平居中 
      padding: 40px 0; // 父元素不定高度值, 由padding把内联子元素挤到垂直居中
    }
    .parent span {
      width: 50px;
      height: 50px;
      background: red;
    }
    

    示图:

    22222.png

    方案二 { keyword: vertical-align }

    运用 vertical-align: middle;(垂直方向) 和 父容器设置 text-align:center(水平方向)

    应用场景一:

    1. 子元素 必须是 内联 或 内联块元素
    2. 水平居中交给 --> 父元素: text-align:center;
    3. 垂直居中交给 --> vertical-align: middle;父元素 利用 伪类元素 作为参考 来 和 子元素 垂直居中对齐.
    <!-- html -->
    <div class="parent">
         <div class="son"></div>
       </div>
    
    /* css */
    .parent {
      background: #ddd;
      width: 300px;
      height: 300px;
      text-align: center;  /*  让内联子元素水平居中对齐 */
      vertical-align: middle;  /* 对齐方式为 垂直居中 */
      
    }
    .parent .son {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: red;
      vertical-align: middle; /* 对齐方式为 垂直居中 */
    }
    
    .parent::after {
      content: "";
      display: inline-block;
      height: 100%;
      width: 1px;
      background: green;
      vertical-align: middle; /* 对齐方式为 垂直居中 */
    }
    

    示图


    33333.png

    方案三 { keyword: absolute | relative }

    运用 position: relative | absolute ;transform: translate: (-50%, -50%); 的实现方案.

    应用场景一: relative

    1. 子元素可以是 内联 或 块级元素
    2. 父元素 宽高固定
    3. 子元素调用css3样式: transform
    <!-- html -->
       <div class="parent">
         <div class="son">x</div>
       </div>
    
    /* css */
    .parent {
      background: #ddd;
      width: 300px;
      height: 300px;
    }
    .son {
      display: inline | inline-block | block;  /* 子元素为 块级 和 内联 都可以 */
      width: 50px;
      height: 50px;
      background: red;
      position: relative;  /* 相对定位,子元素默认位置是在左上角 */
      top: 50%;  /* 子元素顶线 对齐 父元素的水平中线 */
      left: 50%; /*  子元素的左侧边线 对齐 父元素的垂直中线 */
      transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离  */
    }
    

    示图:

    44444.png

    应用场景二: absolute

    1. 子元素可以是 内联 或 块级元素
    2. 父元素 宽高固定
    3. 子元素调用css3样式: transform
    <!-- html -->
       <div class="parent">
         <div class="son">x</div>
       </div>
    
    /* css */
    .parent {
      background: #ddd;
      width: 300px;
      height: 300px;
      position: relative;  /* 父元素设置为 子元素的定位参考,必不可少 */
    }
    .son {
      display: inline | inline-block | block;  /* 子元素为 块级 和 内联 都可以 */
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;  /* 绝对定位,子元素默认位置是在左上角 */
      top: 50%;  /* 子元素顶线 对齐 父元素的水平中线 */
      left: 50%; /*  子元素的左侧边线 对齐 父元素的垂直中线 */
      transform: translate(-50% ,-50%); /* 子元素以 参考自身宽高 来计算 变形位移距离  */
    }
    

    示图:

    55555.png

    方案四 { keyword: flex }

    提要: 运用 flex 布局, 主轴对齐调用 justify-content, 侧轴(交叉轴)对齐 align-items.

    应用场景一:

    1. 父子元素 块级 内联都可以
    2. 水平居中: justify-content: center;
    3. 垂直居中: align-items: center;
    <!-- html -->
      <div class="box">
        <div class="son"></div>
      </div>
    
    /* css */
    .box {
      width: 400px;
      height: 400px;
      background: #ddd;
      border: 1px solid red;
      
      display: flex;  /* 元素设置为flex, 此元素的 display:felx */ 
      justify-content: center; /* 水平居中设置 */
      align-items: center;   /* 垂直居中设置 */
    }
    .box .son {
      width: 100px;
      height: 100px;
      background: blue;
    }
    

    图示:

    3123123.jpg

    方案五(文字垂直居中) { keyword: text-align | line-height }

    提要: 文字居中 依据 父元素 text-align, 子元素里 line-height;

    应用场景一:

    1. 父子元素 块级 内联都可以
    2. 水平居中: 父容器text-align: center;
    3. 垂直居中: 文字标签 line-height: (number= wrapper.height) px ;
    <!-- html -->
      <div class="box">
        <p>xxxxx</p>
      </div>
    
    /* css */
    * {   /*  设置通类,必须 */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }
    .box {
    
    border: 1px solid red;
    width: 100px;
    height: 100px;
    background: #ddd;
    text-align: center;  /* 文字水平居中 */
    }
    .box p {
    
    line-height: 100px; /* 文字垂直方向居中,参数等于父容器高度值 */
    }
    

    图示:

    77777.png

    相关文章

      网友评论

          本文标题:CSS: <垂直居中> 方案解析

          本文链接:https://www.haomeiwen.com/subject/fpitvctx.html