原文：怎么让一个 div 水平垂直居中? - 每天一个JavaScript小知识@Js中文网 · 码农进阶题库

原文地址：https://www.javascriptc.com/interview-tips/zh_cn/more/div-horizontally-and-vertically/

题目描述：

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

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

解题：

  • 思路一：
    div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • 思路二：
    div.parent {
  position: relative;
}
div.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -5px;
}
/* 或 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
  • 思路三：
    div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}

+思路四：

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}
  • 思路五：

1.通过定位 + CSS3的transform形式， 2.亮点：不需要固定宽高


<div class="div-wrap">
  <div class="div-body"> </div>
</div>
<style>
.div-wrap {
    width: 200px; height: 200px;
    position:relative;
}

.div-body {
  width: 100px; height: 100px;
  background:#ccc;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%); //重点这里～
}
</style>

更多内容