css居中

1. 文字在div中水平居中:div{text-align:center}

2. 文字在div中垂直居中:div{line-height:div高度}

3. 子div在父div中水平居中:

.root-div{
    text-align:center;
}
.children-div{
    marigin:0 auto;
}

4.子div在父div中垂直居中:

如果已知父div高度:

.root-div{
    height:300px;
}
.children-div{

  position: relative;//必须指定position
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);

}
如果未知父div高度:
.root-div{
    position: relative;
}
.children-div{

  margin: auto;
  position: absolute;
  left: 0;
  right: 0;

}
 
posted @ 2017-12-08 16:34  哈佬  阅读(160)  评论(0编辑  收藏  举报