CSS布局：居中篇

CSS布局：居中

1、未知高度的元素，垂直居中，水平居中的实现方式有哪些？

• 1.1 绝对定位+css3 transform

  • .wrap{
      position:relative;
    }
    
    .child{
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      /*兼容性代码，针对Safari浏览器的兼容*/
      -webkit-transform:translate(-50%,-50%);
    }
    

• 1.2 css3的flex布局

  • .wrap{
      display:flex;
      justify-content:center;
    }
    .child{
      align-self:center;
    }
    

• 1.3 table布局

  • <div class="wrap">
       <div class="child">
              <div>sadgsdgasgd</div>
       </div>
    </div>
    

  • .wrap{
      display:table;
      text-align:center;
    }
    .child{
      background:#ccc;
      display:table-cell;
      vertical-align:middle;
    }
    .child div{
        width:300px;
        height:150px;
        background:red;
        margin:0 auto;
    }
    

2、实现图片的垂直居中

• 2.1 使用flex布局实现图片垂直居中

  • <div class="flexbox">
      <img src="1.jpg" alt="">
    </div>
    

  • ## .flexbox {
      display: flex;
      
      width: 300px;
      height: 250px;
      background:#fff;
      
      align-items: center
    }
    
    .flexbox img {
      width: 100px;
      height: 100px;
    }
    

• 2.2 利用Display: table;实现img图片垂直居中

  • 原理和上述1.3相同

• 2.3 用绝对定位实现垂直居中（推荐-兼容性好）

  • 子绝父相，原理和上述1.1相同

3、文本元素如何居中

• 3.1 CSS设置文字水平居中
  • text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
  • text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。
• 3.2 CSS设置字体 垂直居中
  • 对于单行文本，我们只需要将文本行高(line-height属性)和所在区域高度(height)设置一致就可以了

    • .box {
          width: 300px;
          height: 300px;
          background: paleturquoise;
          line-height:300px;
      }
      

  • 多行文本垂直居中
    • 父级元素高度不固定
      • 父级高度不固定的时，高度只能通过内部文本来撑开。所以，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等
    • 父级元素高度固定
      • 使用vertical-align:middle +display:table-cell 使文字垂直居中
      • vertical-align:middle +display:table-cell能够使单行文字、多行文字都居中。
      • 但是因为 table-cell 是 inline 类型，所以会导致原来的块级元素每个 div 一行移动到了同一行。如果需要分列两行，需要在外面额外添加容器对位置进行控制。