以动态宽度居中固定 div (CSS)
Posted
技术标签:
【中文标题】以动态宽度居中固定 div (CSS)【英文标题】:Center fixed div with dynamic width (CSS) 【发布时间】:2013-06-08 19:08:46 【问题描述】:我有一个包含这个 CSS 的 div:
#some_kind_of_popup
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
现在,我怎样才能使这个 div 居中?我可以使用margin-left: -450px; left: 50%;
,但这仅在屏幕大于 900 像素时才有效。之后(当窗口小于 900 像素时),它将不再居中。
我当然可以用某种 js 来做到这一点,但是用 CSS 做到这一点是否“更正确”?
【问题讨论】:
@Liam - 我不同意,我认为这个问题本身就是一个彻头彻尾的问题。关于没有固定宽度居中的 div,这些问题没有回答这个问题。 Joshua 所说的,就是让一个 div 居中另一个。 @Liam - 除此之外,您不能在position: fixed
div 上使用 margin: 0 auto
。你甚至读过这个问题吗?
^不。我也试过了。 :p
@JoshuaM 您的断言并非 100% 正确。看我的回答。
【参考方案1】:
无论内容大小如何,这都能正常工作
.centered
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
来源:https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
【讨论】:
当心:transform: translate(-50%, -50%);
导致文本模糊(至少在 chrome 上)
@Jiří 不是我的情况
对我来说也没有了,也许这是一个错误......但我清楚地记得,在这之后整个容器变得模糊,如果只是轻微......让我们删除这个讨论?【参考方案2】:
在flexbox中使用边距时,这种方法不会限制元素的宽度
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
也用于垂直居中
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
【讨论】:
【参考方案3】:如果您可以安全地使用 CSS3 的 transform
属性,这里还有另一种方法:
.fixed-horizontal-center
position: fixed;
top: 100px; /* or whatever top you need */
left: 50%;
width: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
...或者如果您想要水平和垂直居中:
.fixed-center
position: fixed;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
【讨论】:
只要是现代浏览器,这就是这个答案的BEST解决方案!唯一一个类似于 true `float: center' 的功能,因为您可以单击环绕元素,而不必绕着它绕圈子。喜欢这个答案! 小心,不要使用百分比转换来居中文本,因为如果结果值为浮点数,它将被平滑。嘿,男孩,你不想那样,不,你不想。 使用 CSS 变换不仅可以在文本上进行平滑处理;由于转换,我的边框变得很时髦。 在更改屏幕尺寸时可能会提前收缩(取决于分区的大小),从而导致分区边缘出现较大的边框。【参考方案4】:<div id="container">
<div id="some_kind_of_popup">
center me
</div>
</div>
您需要将其包装在容器中。这是css
#container
position: fixed;
top: 100px;
width: 100%;
text-align: center;
#some_kind_of_popup
display:inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
【讨论】:
啊,我喜欢你的想法。固定的 div 将只是另一个 div 的容器,具有实际结果?我会试试这个! 虽然我喜欢你的回答的直观性,但我看不出它如何支持 ie6/7。 @MathewBerg,关于 ie6/7 的要点。在这种情况下,您的答案应该是最好的。这有点 OT,但我个人认为开发人员不应该花时间为 是的,但不幸的是,无论我们未来多远,有些公司都需要支持旧版浏览器。继续并根据您的需要接受我的或 laconbass 的答案。 这也不起作用,因为您仍然无法点击“容器”【参考方案5】:您可以将fixed
或absolute
定位元素设置right
和left
居中到0
,然后将margin-left
和margin-right
居中到auto
,就好像您将@987654331 居中一样@定位元素。
#example
position: fixed;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
请参阅此示例工作 on this fiddle。
【讨论】:
顺便提一下……这并不意外,但它在 IE7 中失败了。它位于此处左起 0px 处。它在 IE 8 中完美运行。 当元素的宽度大于屏幕的宽度时,这不起作用。在这种情况下让它工作会很好。 @andrewb 您可以在right
和left
上应用同样的负边距,至少为value >= witdth / 2
,如jsfiddle.net/PvfFy/168 所示,但恕我直言,这不是一种优雅的方法。我已经在 chrome 上测试了它的乐趣,我不知道它是否适用于其余部分
在问题范围之外,这取决于设置元素的宽度,因此如果您有宽度变化或未知的动态内容,那就不好了。撇开居中不谈,我通常会使用 display: inline-block 和没有设置宽度来做到这一点。有没有人有针对这种情况的无 js 解决方案?
问题是动态宽度,这就是问题的全部,你不能忽视它。以上是关于以动态宽度居中固定 div (CSS)的主要内容,如果未能解决你的问题,请参考以下文章