我在
here上尝试了所有解决方案,但没有一个能够工作.无论窗口大小如何,我都希望水平和垂直居中.
注意:我的容器div就像我想要的那样.它包裹着其他几个div.如果我调整this link建议的更改,我的容器div就搞砸了.我没有尝试让这个响应.它是一个固定的大小(想象一个图像),我只是希望它始终位于窗口的中心,无论窗口大小如何.
这就是我所拥有的:
* { margin: 0; padding: 0; } #container { background-color: black; border-radius: 10px; padding: 5px; display: block; margin: auto; /* changed to auto,didn't make a difference*/ border-width: 1px; border-color: black; border-style: solid; position: absolute; } .light { height: 100px; width: 100px; display: block; border-radius: 50%; margin: 10px; border-width: 5px; background-color: grey; }
<body> <div id="container" onclick="changeColor()"> <div id="green" class="light"></div> <div id="yellow" class="light"></div> <div id="red" class="light"></div> </div> </body>
解决方法
也许它不适合你,因为容器是绝对的,因此身体的高度为零.
>首先添加高度:100%到html和body.
>使用转换到容器的绝对定位元素使用居中方法:
top: 50%; left: 50%; transform: translate(-50%,-50%);
请告诉我您对此的反馈.谢谢!
html,body { height: 100%; } * { margin: 0; padding: 0; } #container { background-color: black; border-radius: 10px; padding: 5px; display: block; margin: 0 auto; border-width: 1px; border-color: black; border-style: solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .light { height: 100px; width: 100px; display: block; border-radius: 50%; margin: 10px; border-width: 5px; background-color: grey; }
<body> <div id="container" onclick="changeColor()"> <div id="green" class="light"></div> <div id="yellow" class="light"></div> <div id="red" class="light"></div> </div> </body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。