不定宽高元素绝对居中方法
要实现例如弹窗绝对的方法,以往我们使的是设定元素宽高,然后用css:
.xx{
…
width: 200 px;
height: 300 px;
top:50%;
left:50%;
margin-left: -100px; // width / 2取负值
margin-top: -150px; // height /2 取负值
…
}
这样的方法问题在于内容的高度很可能是不确定的,所以还得借助js去获取高度再设定margin-top值之类…
但其实css3已经完美实现,只需要稍改动一下:
.xx{
…
top:50%;
left:50%;
transform:translate(-50%,-50%); //替代原先设定的margin负值
…
}对,就是用transform:translate(-50%,-50%); 完美地替代之前margin负值,然后再要不用头痛内容变化导致容器宽高不定啦!
其他方法:
table布局方案:
.parent{
…
display: table;
…}
.parent .child{
…
display: table-cell;
vertical-align: middle;
text-align: center;
…}
.parent .child .xx{
…
display:inline-block;
…}
flex布局方案:
.parent{
…
display: flex;
align-items: center;
…}
.parent .child{
…
}
发表评论