普通元素垂直水平居中原理、单行多行文字垂直水平居中

一、普通元素三种垂直水平居中

如图：

image.png

<div class="main"> //html结构
    <div class="content"></div>
</div>
.main{   //main的样式
     width: 100px;
     height: 100px;
     background-color: #ff7f50;
     display: flex;
     align-items: center;
     justify-content: center;
}

1. absolute小技巧</b>

.content1{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

原理：利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto。

2. translate()函数

.content2{
    width: 100px;
    height: 100px;
    background-color: #20b2aa;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

原理：利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果[注意]IE9-浏览器不支持。

3. 使用flex

.main{
    width: 100px;
    height: 100px;
    background-color: #ff7f50;
    display: flex;
    align-items: center;
    justify-content: center;
}

原理：在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items。

二、文字居中垂直水平居中

image.png

<div class="middle-box"> //html结构
    <div class="middle-inner">
        <p>good good study,</p>
        <p>day day up!</p>
    </div>
</div>

• 1 单行文字垂直居中

  text-align: center;
  line-height = height;
  

• 2 多行文字垂直水平居中

  1. 第一种display:table的方法

     .middle-box {
         display: table;
         height: 200px;
         width: 200px;
         background-color: #20B2AA;
     }
     
     .middle-inner {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
     }
     缺点就是不兼容ie6、ie7.怎么兼容呢？
     两者写法：
      1、条件语句写法
      <!--[if lt IE 8]>
      <style>
         .middle-inner { position: absolute; top:50%;}
         .middle-inner p {position: relative; top: -50%}
      </style>
      <![endif]-->
      2、ie hack写法
      .middle-box {
          display: table;
          height: 300px;
          border: 1px solid #ff0000;
          width: 400px;
          margin: 0 auto;
          position: relative;
      }
     
      .middle-inner {
          display: table-cell;
          vertical-align: middle;
          *position: absolute;
          *top: 50%;
          *left: 50%;
          width: 100%;
          text-align: center;
      }
     
      .middle-inner p {
          position: relative;
          *top: -50%;
          *left: -50%;
      }