css实现垂直居中定位
一、单行内容的居中
设置height与line-height相等,overflow:hidden即可。
.demo {
height: 20px;
line-height: 20px;
overflow: hidden;
}
注:若不使用overflow:hidden,在浏览器页面缩放时会出现问题。
二、已知固定宽高
设置定位top: 50%;left: 50%;margin-top: -1/2(已知高度);margin-left: -1/2(已知宽度)即可。
.demo {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
z-index: 9999;//根据自身需要
}