前端面试CSS系列——DIV垂直水平居中

怎么让一个div 垂直水平居中

代码片断css

// 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;
}

Demohtml

总结

让一个div垂直水平居中有两种状况,第一种是元素不固定宽高的,有三种方式前端

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

若是元素有固定宽高,能够使用:git

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

前端进阶github

相关文章
相关标签/搜索