为了账号安全,请及时绑定邮箱和手机立即绑定

盒子怎么没垂直居中呢?把margin-top改成具体数值有效,但是50%就不行,为什么?

盒子怎么没垂直居中呢?把margin-top改成具体数值有效,但是50%就不行,为什么?

慕粉3782079 2016-10-15 13:55:28
<!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>
查看完整描述

1 回答

?
其实我真的不是东北人

TA贡献105条经验 获得超66个赞

满意请采纳。


<!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>

查看完整回答
反对 回复 2016-10-15
  • 慕粉3782079
    慕粉3782079
    复制你的代码蓝盒子并没有居中呀。从其他地方了解到margin-top:50%;translateY(-50%)要成功需要父盒子具有高度。
  • 1 回答
  • 0 关注
  • 2046 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信