css 水平垂直居中

ok, 下面直接上代码

一 知道宽和高

利用相对定位 绝对也可以 换汤不换药

 .children {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

二 未知宽和高

• one

.parent{
  line-height: 100px;
}

.children {
  display: inline-block;
  vertical-align: middle;
}

• two

.parent{
  position:relative;
}
 
.childen{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

• three 这个子元素需要是inline或者inline-block元素

.parent{
  width: 100px;
  width: 100px;
  display:table-cell;
  vertical-align:middle;
}
 
.childen{
 
}

• four 利用flex

.parent{
  display:flex;
  align-items: center;
}
 
.childen{
 
}

• five css3咯

.parent{
  position:relative;
}
 
.childen{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

虽然css3和flex可以轻松解决 但是在实际项目中 千万要考虑兼容性问题