transform定位

来源:互联网 发布:西南交通网络大学是985 编辑:程序博客网 时间:2024/06/14 16:59

以前我们使用居中的时候都是使用

margin-top 和margin-bottom

这种当我们给宽度和高度定死的时候是能用的例如:


width:100px;

height:100px;

但是如果宽高是百分比呢?


所以这里我推荐使用transform当我们的宽高不知道的时候我们就能使用它

<!DOCTYPE html><html><head><title></title><style type="text/css">.center{position: absolute;top: 50%;left: 50%;width:40%;height:30%;text-align:center;background:#393;color:#fff;transform: translate(-50%, -50%);}</style></head><body><div class="center">fasfsafasfsaa</div></body></html>