web前端

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

2016-11-22  本文已影响8人  程小E

第一种

缺点:造成界面垂直放大

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;时会实现水平居中。
上一篇下一篇

猜你喜欢

热点阅读