首先明确一下概念:
- left是指子元素的左margin距离父元素的左padding的距离
- margin:auto是自适应的意思,由浏览器自动计算
- translatex:关于x轴的坐标转换,数值为百分数时是相对于本身的宽高。
理解了以上三点,就基本能看懂各种垂直居中方法了
1.top:0;bottom:0;left:0;right:0;margin:auto;
这种方法的意思是先把子元素margin和父元素padding的距离置为0,可以理解为子元素和父元素之间没有空隙,然后把margin置为auto,margin平分子元素和父元素之间的距离,也就是说子元素并不是真正意义的居中,只是子元素中间的内容居中了,子元素和父元素之间的距离是计算机自动计算的(平分);注意这个方法需配合子元素position:absolute使用,因为默认情况下,margin:auto只对上下起作用,对左右不起作用,加上position使元素脱离标准流,margin:auto可识别
<div class="father">
<div class="son">
</div>
</div>
.father{
width:400px;
height:400px;
background-color:pink;
position:relative;
}
.son{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
2.transform:translate()
这种方法适用于不知道父元素宽高的情况下(面试官可能会这样问呢)。这种方法是通过先把元素定位到父元素的百分之五十的位置top:50%;left:50%;看下图:
注意此时子元素的左上角在父元素中间,整个子元素处于父元素右下四分之一的左上角,然后通过transform:translate(-50%,-50%),使子元素相对自身移动百分之五十,这样子元素就居中啦。需要注意的是自元素中要写定位position:relative;这样才能根据父元素识别到定位的基点。
<div class="father">
<div class="son">
</div>
</div>
.father{
width:500px;
height:500px;
background-color:pink;
/*position:relative;*/
}
.son{
width:100px;
height:100px;
background-color: red;
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
两个小栗子讲完了,你明白了么?文章末尾,再送两个小栗子(#^.^#)
3.line-height
当一个div里没有内容时高度为0,当有内容比如文字时,div就有了高度,难道是文字把div撑开了?其实不是,这个高度是由元素的line-height决定的。当把line-height设置为该div的高度时,div中的文字就居中显示了。代码很简单
<div class="line">
qqqqq
</div>
.line{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
4、table
使用table布局也可以实现居中
<div class="father">
<div class="son">
qqqqq
</div>
<div class="son">
qqqqq
</div>
</div>
.father{
width:400px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle; //红色框上下居中
background-color:pink;
}
.son{
width:100px;
height:100px;
display:inline-block;
background-color:red;
line-height:100px; //文字在红色框中居中
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。