console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>水平垂直居中</title>
</head>
<body>
<h3>水平垂直居中</h3>
  <h4>使用absolute+transform实现</h4>
  <div class='parent parent1'>
    <div class='child child1'>1</div>
  </div>
  <h4>使用inline-block+text-align/tale-cell+vertical-align实现</h4>
  <div class='parent parent2'>
    <div class='child child2'>2</div>
  </div>
  <h4>使用flex+justify-content+align-items实现</h4>
  <div class='parent parent3'>
    <div class='child child3'>333</div>
  </div>
</body>
</html>

.parent{
  height:40px;
  background-color:yellow;
}
.child{
  background-color:red;
}


/* absolute+transform */
.parent1{
  position:relative;
}
.child1{
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%);
  transform:translateY(-50%);
}

/* inline-block+text-align/tale-cell+vertical-align */
.parent2{
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}
.child2{
  display:inline-block;
}

/* flex+justify-content+align-items */
.parent3{
  display:flex;
  justify-content:center;
  align-items:center;
}
.child3{
  
}