不定宽高元素绝对居中方法

要实现例如弹窗绝对的方法,以往我们使的是设定元素宽高,然后用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{

}

发表评论