子元素垂直、左右居中的问题
还是直接开始吧,父级元素默认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;
技术分享的同学,请注明转载出处
后期还会不定期更新此类方法