TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

CSS Challenge

2 点作者 webuiarchitect将近 15 年前

2 条评论

webuiarchitect将近 15 年前
Thanks @faramarz a lot for the try. I cannot say that it doesn't work; it definitely does. The thing is, this solution cannot be accepted as generic. I couldn't explain all the conditions in the twitter post; my mistake. But it was rather a sarcastic post. If someone would want to try for a generic solution: 1) Horizontal centering isn't necessary. So let the DIV width occupy all the available width. 2) The height cannot be fixed. The content can vary.<p>I doubt if there exist any solution to this. My point is, if we are talking about Clones, Moon, Rocket Science and HTML5, a simple thing like this is not possible even today. If CSS can offer margin: 0 auto; why can't it offer something to align elements vertically center? May be, margin: auto 0;???<p>@faramarz, once again, thank you very much for spending time on this.
faramarz将近 15 年前
Done! Works in every single browser.<p><pre><code> div { background: red; width: 250px; height: 250px; top: 50%; left: 50%; position: absolute; margin: -125px 0 0 -125px; /* Width of Element / 2 = Negative Left Margin Height of Element / 2 = Negative Top Margin */ } </code></pre> Live demo <a href="http://www.faramarzhashemi.com/valign.html" rel="nofollow">http://www.faramarzhashemi.com/valign.html</a>