CSS:如何用动态宽度定位div

I have a popup which is positioned in the center of the screen with: transform: translate(-50%, -50%); and position: absolute. Unfortunately for some reason my width is fixed and it is not dynamic ( based on the content ).

我有一个弹出窗口，它位于屏幕的中心位置:transform: translate(-50%， -50%);位置:绝对的。不幸的是，由于某些原因，我的宽度是固定的，并且不是动态的(基于内容)。

This is my jsfiddle: https://jsfiddle.net/qh13mnaf/1/

这是我的jsfiddle: https://jsfiddle.net/qh13mnaf/1/

Why the width of the popup is not bigger?

为什么弹出窗口的宽度没有变大?

1 个解决方案

#1

Solution:

解决方案:

Set .popup-content { width: 100%; } and nest your content inside another div display: table; margin: 0 auto;

设置.popup-content {width: 100%;}并将内容嵌套到另一个div display: table中;保证金:0汽车;

JSFIDDLE DEMO

JSFIDDLE演示

Explanation:

解释:

Your centered div .popup-content has the attribute left: 50%, which means it will leave the left half of its parent blank. This means, that the div sets its own width to all of the width of its parent that is left, which although will be 50%.

居中的div .popup-content属性为left: 50%，这意味着它将把父元素的左半边留空。这意味着，div将其自己的宽度设置为其父元素的所有宽度，尽管宽度为50%。

For example if you set .popup-contents width to left: 30%, it will use 70% of its parents width.

例如，如果您将.popup内容的宽度设置为左:30%，它将使用其父宽度的70%。

Your second css attribute transform: translate(-50%, -50%); only does move the whole div, without changing (or influencing) its width.

第二个css属性转换:translate(-50%， -50%);只移动整个div，而不改变(或影响)它的宽度。

CSS derivation:

CSS推导:

I guess you want the div to be only as big as needed and centered both, horizontal and vertical. If thats right, heres a step by step solution:

我猜你想要这个div的大小和需要的大小一样，水平和垂直。如果这是正确的，以下是一个循序渐进的解决方案:

As your css does a good job of centering it vertical, you can keep this, but simply set its width to 100%:

由于你的css在垂直方向上做得很好，你可以保持这个，但是只要将它的宽度设置为100%:

.popup-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translate(0%, -50%);
}

Next you can nest your content inside another div to center it horizontal using display: table;

接下来，您可以将内容嵌套到另一个div中，使用display: table将其居中;

.popup-center-horizontal {
  display: table;
  margin: 0 auto;
  background: red;
}

You can check a working demo right here JSFIDDLE DEMO.

您可以在这里检查一个工作演示，JSFIDDLE演示。

If you do not want your div to reach the side, you can set a max-width to limit its size, for example:

如果不希望div到达侧边，可以设置最大宽度来限制其大小，例如:

.popup-center-horizontal {
   max-width: 90%;
}

Works on IE8+.

IE8 +。

#1