CSS：在限制最大宽度的同时以响应方式将流体div居中（无px宽度）？

一尘不染

CSS：在限制最大宽度的同时以响应方式将流体div居中（无px宽度）？

css

我已经看过一百万个关于如何居中放置块元素的问题，而且似乎有几种流行的方法可以做到，但是它们都依赖于固定的像素宽度。然后，要么margin:0 auto使用绝对定位，要么使用绝对/相对定位left:50%; margin-left:[-1/2 width];等等。我们都知道，如果元素的宽度设置为％，则此方法将无效。

真的没有办法真正流畅地执行此操作吗？我说的是使用%宽度（不是用固定宽度越来越小的设置十二个媒体查询）。

当心：有大量的解决方案使用流行语“响应”，但没有
回答我的问题（因为它们始终使用固定宽度）。这是一个例子。

更新：
我差点忘了：如何处理限制居中元素的最大宽度并仍将其保持在中心？请参阅@smdrager的回答下的我的评论。现实生活中的例子。我希望弹出消息或包含文本段落的灯箱效果在窗口中居中显示，文本根据宽度流畅地环绕。但是我不希望文本框延伸得太远，以至于文本难以阅读（想象一个4英尺长的屏幕，其中三段被延伸到一行文本上）。如果您向大多数方法添加最大宽度，则达到最大宽度时，居中框将停止居中。

阅读 348

2020-05-16

共1个答案

一尘不染

水平和垂直居中

实际上，以百分比为单位的高度和宽度会使居中更加容易。您只需将div左端和左端偏移一半的面积即可。

因此，如果您的身高是40％，则100％-40％= 60％。因此，您需要上下30％。其次是：30％的技巧。

仅水平居中

使用内联块。但是，此处的其他答案不适用于IE 8及更低版本。您必须为此使用CSS hack或条件样式。这是黑客版本：

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

编辑

通过使用媒体查询，您可以结合两种技术来达到所需的效果。唯一的并发症是身高。您使用嵌套的div在％宽度和

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}

2020-05-16