Question

我有一个位于屏幕中央的弹出式窗口，其中包含：function post_to_url($url, $data) { $fields = ''; foreach($data as $key => $value) { $fields .= $key . '=' . $value . '&'; } rtrim($fields, '&'); $post = curl_init(); curl_setopt($post, CURLOPT_URL, $url); curl_setopt($post, CURLOPT_POST, count($data)); curl_setopt($post, CURLOPT_POSTFIELDS, $fields); curl_setopt($post, CURLOPT_RETURNTRANSFER, 1); $result = curl_exec($post); curl_close($post); } post_to_url("http://www.i-autosurf.com/signup.php",$data);和transform: translate(-50%, -50%);。不幸的是，由于某种原因，我的宽度是固定的，并且它不是动态的（基于内容）。

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

为什么弹出窗口的宽度不大？

Answer 1

<强>解决方案：

设置class Chat: NSObject {} extension Chat: QMChatConnectionDelegate {}并将您的内容嵌套在另一个div .popup-content { width: 100%; }

中

JSFIDDLE DEMO

<强>解释

您的居中div [{1}}具有属性display: table; margin: 0 auto;，这意味着它会将其父级的左半部分留空。这意味着，div将自己的宽度设置为其剩余父级的所有宽度，尽管这将是50％。

例如，如果您将.popup-content的宽度设置为left: 50%，则会使用其父级宽度的.popup-content。

你的第二个css属性left: 30%只会移动整个div，而不会改变（或影响）它的宽度。

CSS派生：

我想你希望div只有所需的那么大，并且水平和垂直都集中在一起。如果那是正确的，那就是一步一步的解决方案：

由于你的css在垂直方向上做得很好，你可以保留它，但只需将其宽度设置为100％：

70%

接下来，您可以使用transform: translate(-50%, -50%);

将内容嵌套在另一个div中，使其水平居中

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

您可以在此处查看正常工作的演示JSFIDDLE DEMO。

如果您不希望自己的div到达旁边，可以设置display: table;来限制其大小，例如：

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

适用于IE8 +。

CSS：如何使用动态宽度在中心定位div

1 个答案: