[TOC]

CSS答过的笔试题

1. 实现水平垂直居中，至少写2中方法

transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);

第一种，使用垂直对齐vertical-align: middle;水平对齐：text-align: center;

<style>
  .father {
    height: 300px; width: 300px; border: 1px solid;
    text-align: center;
  }
  .father::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .son {
    vertical-align: middle;
    border: 1px solid;
    display: inline-block;
  }
</style>
<div class="father">
  <div class="son">
    子元素
  </div>
</div>

第二种，使用绝对定位,transform: translate(-50%, -50%)

<style>
  .father {
    height: 300px; width: 300px; border: 1px solid;
    position: relative;
  }
  .son {
    border: 1px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div class="father">
  <div class="son">
    子元素
  </div>
</div>

transform:变形，包括拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换

translate：移动，第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离