垂直水平居中

定宽高（垂直水平

• 绝对定位 加 margin

基于设置成绝对定位后 设置负margin 进行上下移动

<div class="box">
    <div class="children-box"></div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

• 绝对定位 transform

本质上还是基于绝对定位 后设置 transform 进行变形移动

<div class="box">
    <div class="children-box"></div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

• 绝对定位 left right bottom top margin的自适应

<div class="box">
    <div class="children-box"></div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    margin： auto;
}

• flex

<div class="box">
    <div class="children-box"></div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    width: 100px;
    height: 100px;
    background: yellow;
}

• grid

基于网格 margin 设置上下自适应

<div class="box">
    <div class="children-box"></div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    width: 100px;
    height: 100px;
    margin: auto;
    background: yellow;
}

不定高

思路：本质上还是上面的做法

• 绝对定位 transform
• table-cell

<div class="box">
    <div class="children-box">chuguo</div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
    background: yellow;
    display: inline-block;
}

• flex
• flex grid 变异布局

<div class="box">
    <div class="children-box">chuguo</div>
</div>
​
/* style */
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;/* 或者是 grid */
}
.children-box {
    background: yellow;
    margin: auto;
}

对图片处理

• 父级line-height == height + vertical-align:middle

<div>
    <img src=""/>
</div>
​
/* style */
<style>
div{
    width:500px;
    height:300px;
    line-height:300px;
    text-align:center;
}
img{
    vertical-align:middle;
}
</style>
​

• 绝对定位 margin（负margin）/ tranform（translation）
• 父元素 disaply: table-cell; vertical-align: middle;

思路

行内样式

• 水平居中

  • 行内样式 text-align: center;
  • flex display: flex; justify-content: center;

• 垂直居中

  • 当行文本： height === line-height
  • 多行文本： disaply: table-cell; vertical-align: middle;

块级样式

• 水平居中

  • 定宽 margin: 0 auto;
  • 不定宽：flex 绝对定位等

• 垂直居中

  • position: absolute设置left、top、margin-left、margin-top(定高)；

  • position: fixed设置margin: auto(定高)；

  • display: table-cell；

  • transform: translate(x, y)（不定高）；

  • flex(不定高，不定宽)；

  • grid(不定高，不定宽)；