子元素垂直、左右居中的问题

子元素垂直、左右居中的问题

---

还是直接开始吧,父级元素默认display:block;

html部分

<div class="c-middle-box">
    <div class="c-middle"></div>
</div>  

以下是css部分

1 - - 使用css3中新增属性tranform相关知识实现（推荐使用）

.c-middle-box{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #63eefe;
}
.c-middle{
    position: relative;/* position一定要设置，但不可设置为static*/
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    left: 50%;/* left值固定*/
    top: 50%;/* top值固定*/
    transform: translate(-50%,-50%);/* translate值固定*/
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

注：父级绝对定位，是为了更好的展示示例。在实际项目中可根据实际情况而定。(在谷歌浏览器中如果父级元素没有高度，会导致此方法无效；)

---

2 - - 绝对定位方式来上下左右居中；

.c-middle-box{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #63eefe;
}
.c-middle{
    position: absolute;/*值固定*/
    left: 0;/*值固定*/
    right: 0;/*值固定*/
    bottom: 0;/*值固定*/
    top: 0;/*值固定*/
    width:50%;
    height:50%;
    margin: auto;/*值固定*/
}

---

3 - - 父级元素display:table-cell;

.c-middle-box{
    display: table-cell;/*值固定*/
    width: 618px;
    height: 330px;
    background: #63eefe;
    text-align: center;
    vertical-align: middle;/*值固定*/
}
.c-middle{
    display: block;
    margin: 0 auto;
}

注：如果子元素为inline-block,那么c-middle内样式可不写；

---

4 - - 子元素inline-block方式

.c-middle-box{
    display: block;
    width: 618px;
    height: 330px;
    line-height:330px;/* line-height一定要等于自身的高度 */
    background: #63eefe;
    text-align: center;
    vertical-align: middle;
    font-size: 0;
}
.c-middle{
    display: inline-block;
    font-size: 16px;
    line-height:1;/* 为避免继承父级元素line-height。此处可根据实际情况重新设置line-height */
}

父级元素设置font-size:0;是因为display:inline-block;有默认的边距，这样做是为了消除边距。子元素可根据实际情况重新设置font-size:;如果在一些浏览器中还存在边距。可以试试在父级样式加上letter-spacing: 0;

---

技术分享的同学，请注明转载出处

---

后期还会不定期更新此类方法