<!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>
-
慕粉3782079復制你的代碼藍盒子并沒有居中呀。從其他地方了解到margin-top:50%;translateY(-50%)要成功需要父盒子具有高度。
- 1 回答
- 0 關注
- 2093 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消