【笔记】11.22 实现水平垂直居中效果(不断更新)

第一种

缺点:造成界面垂直放大

margin:50% auto;

第二种

缺点:需要知道宽度和长度

position: absolute;
top:50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;

第三种

最常用,必记!
注:如父级不是body本身,需要给父元素设置position:relative;)

position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            注:当只设置top:0;bottom:0;时会实现垂直居中
                同理,只设置left:0;bottom:0;时会实现水平居中。

你可能感兴趣的:(【笔记】11.22 实现水平垂直居中效果(不断更新))