前端面试基础01

水平居中

行内：text-align:center;
块级：margin:0 auto

垂直居中

单行文本：line-height
块级：display:inline-block;vertical-align:center;

水平垂直居中
1、relative+absolute

<div class="wp">
  <div class="size"></div>
</div>
.wp {
  position:relative;
}
.size {
  position:absolute;
  top:50%;
  left:50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

2、relative+absolute+calc

<div class="wp">
  <div class="size"></div>
</div>
.wp {
    position: relative;
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

3、relative+absolute+transform

<div class="wp">
  <div class="size"></div>
</div>
.wp {
    position: relative;
}
.box {
   position: absolute;
   width: 100px;
   height: 100px;
   top: 50%;
   left: 50%;
   transform:translate(-50%,-50%);

}

4、flex

<div class="wp">
  <div class="size"></div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}