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

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

---

还是直接开始吧,父级元素默认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;

---

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

---

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