上下左右居中对齐需要考虑两种情况,一种是里层元素是内联,另一种情况是block;
使用绝对布局实现居中对齐,而且不区分里层元素是否是block;
绝对布局实现
<div id="test2">
<!-- <div>
呵呵呵
</div> -->
<img src="imgs/lalala.jpg" alt="">
</div>
-------style-----
#test2 {
font-size: 30px;
background-color: #abcdef;
width: 800px;
height: 800px;
position: relative;
}
#test2 > div{
width:200px;
height: 200px;
background-color:black;
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
diaplay:table-cell来实现
如果不想脱离文档流,通常使用diaplay:table-cell来实现
table-cell可以控制两个重要属性来实现居中,即text-align和vertical-align
但是text-align对div无效,因此如果里层是div,则需要改变他的display为inline-bolck
/* #test2 {
width: 800px;
height: 800px;
display:table-cell;
vertical-align:middle;
background-color: red;
text-align: center;
}
#test2 > div {
width: 600px;
height: 600px;
background-color:black;
display:inline-block;
} */
如果里层是内联,例如图片,需要注意是的,图片也是vertical-align:middle;
因为图片的默认对齐方式是vertical-align:bottom; 底部对齐,相当于图片的下端与字母x的下端对齐,改成vertical-align:middle;即中线对象,与x的中线对齐。
/* #test2 {
width: 800px;
height: 800px;
background-color: #abcdef;
display:table-cell;
text-align: center;
vertical-align:middle;
}
#test2 img {
vertical-align:middle;
} */
如果里层是内联,也可以不设置table-cell,而改用行高,
重要的是理解 text-align: center; vertical-align:middle; 对什么有效,对什么无效,以及在table-cell下的表现
/* #test2 {
width: 800px;
height: 800px;
background-color: #abcdef;
text-align: center;
vertical-align:middle;
line-height: 800px;
}
#test2 img {
width: 20%;
vertical-align:middle;
} */