您的位置:首页 > Web前端 > CSS

CSS 如何设置垂直居中

2017-03-22 09:45 260 查看
1、水平居中我们都知道,可以直接用:

margin:0 auto;

2、垂直居中,需要做一点小小的计算,关键代码如下:

height: 600px;

position: absolute;

top: 50%;

margin-top:-300px;

如需水平且垂直居中:

height: 600px;

width: 400px;

position: absolute;

top: 50%;

left: 50%;

margin:-300px 0 0 -200px; 

注:首先,position必须要绝对定位;然后,宽高必须设置值;最后,left/top为50%,margin-top为高度的一半,margin-left为宽度的一半。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: