您的位置：首页 > Web前端 > CSS

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

2017-03-24 17:07 148 查看

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

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html css3

相关文章推荐

新的分享

章节导航