盒子怎么没垂直居中呢？把margin-top改成具体数值有效，但是50%就不行，为什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: black;overflow: hidden">
<div style="width: 50%;background-color: blue;float: left;margin-top: 50%;transform: translate(-50%)">
<p>怎么让我居中</p>
</div>
<div style="width: 50%; float: left">
<div style="width: 100px;height: 400px;background-color: red;"></div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: black;overflow: hidden">
<div style="width: 50%;background-color: blue;float: left;margin-top: 50%;transform: translate(-50%)">
<p>怎么让我居中</p>
</div>
<div style="width: 50%; float: left">
<div style="width: 100px;height: 400px;background-color: red;"></div>
</div>
</div>
</body>
</html>
慕粉3782079浏览 2051回答 1
1回答
-
其实我真的不是东北人
满意请采纳。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; } #div { transform:translate(-50%,-50%); } </style></head><body><div style="background-color: black;overflow: hidden"> <div style="width: 50%;background-color: blue;float: left;margin-top: 50%;transform: translate(-50%)"> <p>怎么让我居中</p> </div> <div style="width: 50%; float: left"> <div style="width: 100px;height: 400px;background-color: red;" id="div"></div> </div></div></body></html>
随时随地看视频慕课网APP
Bootstrap
Html/CSS
Html5