CSS 各种居中

说道css恶心的垂直问题，我们首先要提下这个问题
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？


如果元素的display为none,那么元素不被渲染,position,float不起作用,如果元素拥有position:absolute;或者position:fixed;属性那么元素将为绝对定位,float不起作用.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.


1.使用position或relative居中
div {
  position: relative; /* 相对定位或绝对定位均可 */
  width:500px;
  height:300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px; ||   transform:translate(-50%,-50%); /* 外边距为自身宽高的一半 */
  background-color: pink; /* 方便看效果 */
  }


2.使用position
 div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 方便看效果 */
 }


3.浮动元素居中(上面两种方法也适用)
.parent{
 float:left;
 position:relative;
 left:50%;
}
.child{
 float:left;
 position:relative;
 right:50%;
}


css垂直居中
.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}


.parent{
    display: flex;
    justify-content:center;
    align-items:Center;
}