关于javascript:前端面试CSS系列DIV垂直水平居中

怎么让一个 div 垂直程度居中

代码片段

// HTML
<div class="parent">
  <div class="child"></div>
</div>

相对定位

.parent{position:relative;}

// 第一种
.child{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

// 第二种（须要固定宽高）.child{
  position:absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}

// 第三种（须要固定宽高）.child{
    position:absolute;
  width:100px;
  height:100px;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

// 第四中（固定宽高 + transform 变形）.child{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  background: yellow;
  transform: translate(-50px, -50px);
}

flex 布局

.parent {
  width: 500px;
  height: 500px;
  background: pink;
  
  
  display: flex;
  align-items: center;
  justify-content: center;
}

// 子元素能够固定宽高
.parent. child {
  width: 100px;
  height: 100px;
  background: yellow;
}

// 子元素不设置宽高
.parent. child {background: yellow;}

table-cell

.parent {
  width: 500px;
  height: 500px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: pink;
}

.parent .child {
  display: inline-table;
  /* 
  // 这种写法也能够
  display: inline-block; 
  display: inline; */
  width: 100px;
  height: 100px;
  background: yellow;
}

Grid

.parent {
  width: 500px;
  height: 500px;
  display: grid;
  background: pink;
}
.parent .child {
  align-self: center;
  justify-self: center;
  width: 100px;
  height: 100px;
  background: yellow;
}

Demo

总结

让一个 div 垂直程度居中有两种状况，第一种是元素不固定宽高的，有三种形式

1. 应用相对定位加 transform 偏移
2. 应用 flex 布局，设置 align-items:center;justify-content:center;
3. 应用 grid 布局，设置 align-self:center; justify-self:center;

如果元素有固定宽高，能够应用：

1. 相对定位 +transform 偏移
2. 相对定位 + 负 margin 值
3. 相对定位 +margin:auto
4. 不固定宽高的三种形式

参考

前端进阶