![](/img/trans.png)
[英]Center div element containing text vertically and horizontally in another div
[英]Cannot horizontally center a div element within a div element
我正在開發一個布局,在這個布局中有四個 div 元素黃色、綠色、藍色、灰色。 我想將黃色 div 中的綠色 div 水平居中。
試過"margin: auto;"
和其他 css 方式,還有 w3-css 方式。 但我似乎無法將其居中。 我做錯什么了?
<!doctype html>
<html>
<head>
<title>Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
</head>
<body>
<div class="" style="width:100vw;height:100vh">
<div class="" style="height:47px; width:100%; position: absolute; z-index:2">
<div class="w3-bar" style="background-color: #2f4f4f; ">
</div>
</div>
<div class="w3-row" style="height:100%; width:100%; position: fixed; ">
<div class="w3-col w3-animate-left w3-collapse " style="height:100%; width:296px; z-index:1; background-color: yellow; " id="sidebar">
<div
style="position: absolute; top: 47px; width:280px; height:500px; margin: auto; background-color: green">
</div>
</div>
<div class="w3-rest " style="height:100%; ">
<div style="height:97%; background-color: blue;">
</div>
<div style="height:3%; width:100%; background-color: gray;">
<div>
</body>
</html>
position: absolute;
top: 50%;
width: 280px;
height: 500px;
margin: auto;
transform: translateY(-50%);
background-color: green;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.