console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>demo1</title>
</head>
<body>
<h3>水平居中</h3>
 <h4>使用inline-block+text-align实现</h4>
  <div class='parent parent1'>
    <div class='child child1'>11</div>
  </div>
  <h4>使用table+margin</h4>
  <div class='parent parent2'>
    <div class='child child2'>22</div>
  </div>
  <h4>使用absolute+transform实现</h4>
  <div class='parent parent3'>
    <div class='child child3'>33</div>
  </div>
  <h4>使用flex+margin实现</h4>
  <div class='parent parent4'>
    <div class='child child4'>44</div>
  </div>
  <h4>使用flex+justify-content实现</h4>
  <div class='parent parent5'>
    <div class='child child5'>55</div>
  </div>
  <br /><br />
  <h3>垂直居中</h3>
  <h4>使用table-cell+vertical-align实现</h4>
  <div class='parent parent6'>
    <div class='child child6'>66</div>
  </div>
  <h4>使用absolute+transform实现</h4>
  <div class='parent parent7'>
    <div class='child child7'>77</div>
  </div>
  <h4>使用flex+align-items实现</h4>
  <div class='parent parent8'>
    <div class='child child8'>88</div>
  </div>
</body>
</html>

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

/* 水平居中 */
/* inline-block+text-align */
.parent1{
  text-align:center;
}
.child1{
  display:inline-block;
}

/* table+margin */

.child2{
 display:table;
  margin:0 auto;
}

/* absolute+transform */
.parent3{
  position:relative;
}
.child3{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}


/* flex+margin */

.parent4{
  display:flex;
}
.child4{
  margin:0 auto;
}

/* flex+justyfy-content */
.parent5{
  display:flex;
  justify-content:center;
}

/* 垂直居中 */
/* table-cell+verticial-align */
.parent6{
  display:table-cell;
}
.child6{
  vertical-align:middle;
}


/* absolute+transform */
.parent7{
  position:relative;
}
.child7{
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

/* flex+align-items */
.parent8{
  display:flex;
  align-items:center;
}