水平居中、垂直居中

一. 让图片（行内块元素）垂直居中：

　　1.在父级设置：行高 等于 高度，字体大小为0

line-height: 1rem;
height: 1rem;
font-size: 0;

　　2.图片自己设置：

vertical-align: middle;

 　　Table 合并行了之后，需要文字居中，也可以使用。

　　3.vertical-align 的用法

　　　　vertical-align: top / middle / ...... 很多属性可以在调试器里调试，这里不详细介绍。

　　　　最近发现一个新写法，能解决所有属性都用过了依然不是想要的高度时使用：

　　　　　　vertical-align: -0.2em ，同理px、rem都行，直接用单位肉眼对齐，很舒心。

二. 常用的垂直、左右居中：

　　1.四个方向偏移量为 0 ，然后 margin 设置为 auto

.dad {
    position: relative;
}
.son {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

　　2.绝对定位，上和左50%，再利用 margin 反向移动宽高的一半

.dad {
    position: relative;
}
.son {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

　　3.绝对定位，上和左50%，再利用 translate 反向移动50%

.dad {
  position: relative;
}
.son {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

　　4.父级 flex 布局

#dad {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

三. 文字的居中

　　height = line-height，text-align: center，就不用说了，最近发现，尤其是<button>按钮，设置border之后对文的上下居中会有影响。

　　解决办法：使用计算属性calc，减掉下行高。

测试代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <script src="./echarts.js"></script> -->
  <!-- <link rel="stylesheet" href="./index.css"> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      border: 0.01rem solid red;
      padding: 0.5rem;
    }

    span {
      font-size: 0.16rem;
    }

    .button {
      font-size: 0.16rem;
      padding: 0 0.5rem;
      cursor: pointer;
      border-radius: 0.01rem;
      border: 0.2rem solid red;
      color: #FFFFFF;
      background: #427AFF;
      display: inline-block;
      height: 2rem;
      text-align: center
    }

    .button1 {
      line-height: 2rem;
    }

    .button2 {
      line-height: calc(2rem - 0.2rem);
    }

    .button3 {
      line-height: calc(2rem - 0.4rem);
    }
  </style>
</head>

<body>
  <div>
    <span>测试边框对文字对齐的影响</span>
    <button class="button button1">确定</button>
    <button class="button button2">取消</button>
    <button class="button button3">返回</button>
  </div>
</body>

</html>
posted @ 2019-02-19 17:30  真的想不出来  阅读(762)  评论(0)    收藏  举报