css3的transform:translate(-50%,-50%)居中问题

使用css3的transform:translate(-50%,-50%)能够居中，但我为什么做不出来，设置宽高都为200px；但是展示时候它一半被隐藏起来了，只剩下100px展示。

元歌

浏览 5514回答 2

2回答

Bigboss_0101

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 1000px; height: 1000px; background: #ccc; position:relative; } #box2{ width: 200px; height: 200px; background: #f00; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style></head><body> <div id="box1"> <div id="box2"></div> </div></body></html>

小儒生

试试浏览器前缀啊或许是浏览器问题

随时随地看视频慕课网APP