blocks|key|82046|text|<div+id="container">
++++<div+id="some_kind_of_popup">
++++++++center+me
++++</div>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|82047|你需要把它包装在一个容器里。这是css|unstyled|82048|#container{
++++position:+fixed;
++++top:+100px;
++++width:+100%25;
++++text-align:+center;
}
#some_kind_of_popup{
++++display:inline-block;
++++width:+90%25;
++++max-width:+900px;++
++++min-height:+300px;++
}|82049|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="some_kind_of_popup"&gt;
        center me
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>You'd need to wrap it in a container. here's the css</p>

<pre class="lang-css prettyprint-override"><code>#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;  
}
</code></pre>


blocks|key|299441|text|可以将fixed或absolute定位元素居中，将right和left设置为0，然后将margin-left+&+margin-right设置为auto，就像将static定位元素居中一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|299442|#example+{
++++position:+fixed;
++++/*+center+the+element+*/
++++right:+0;
++++left:+0;
++++margin-right:+auto;
++++margin-left:+auto;
++++/*+give+it+dimensions+*/
++++min-height:+10em;
++++width:+90%25;
}|code-block|syntax|javascript|299443|请参阅此示例工作on+this+fiddle。|299444|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/PvfFy/^0|3|5|9|8|P|5|V|4|12|1|17|B|1L|C|20|4|28|6|0|0|8|E|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|M|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can center a <code>fixed</code> or <code>absolute</code> positioned element setting <code>right</code> and <code>left</code> to <code>0</code>, and then <code>margin-left</code> &amp; <code>margin-right</code> to <code>auto</code> as if you were centering a <code>static</code> positioned element.</p>

<pre class="lang-css prettyprint-override"><code>#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}
</code></pre>

<h2>See this example working <a href="http://jsfiddle.net/PvfFy/" rel="noreferrer">on this fiddle</a>.</h2>


blocks|key|299470|text|如果您可以安全地使用css3的transform属性，这里是另一种方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|299471|.fixed-horizontal-center
{
++++position:+fixed;
++++top:+100px;+/*+or+whatever+top+you+need+*/
++++left:+50%25;
++++width:+auto;
++++-webkit-transform:+translateX(-50%25);
++++-moz-transform:+translateX(-50%25);
++++-ms-transform:+translateX(-50%25);
++++-o-transform:+translateX(-50%25);
++++transform:+translateX(-50%25);
}|code-block|syntax|javascript|299472|...or如果既要水平居中，又要垂直居中：|299473|.fixed-center
{
++++position:+fixed;
++++top:+50%25;
++++left:+50%25;
++++width:+auto;
++++height:+auto;
++++-webkit-transform:+translate(-50%25,-50%25);
++++-moz-transform:+translate(-50%25,-50%25);
++++-ms-transform:+translate(-50%25,-50%25);
++++-o-transform:+translate(-50%25,-50%25);
++++transform:+translate(-50%25,-50%25);
}|299474|entityMap^0|F|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Here's another method if you can safely use CSS3's <code>transform</code> property:</p>

<pre><code>.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%);
}
</code></pre>

<p>...or if you want both horizontal AND vertical centering:</p>

<pre><code>.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%);
}
</code></pre>


blocks|key|82139|text|无论其内容的大小如何，此操作都有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|82140|.centered+{
++++++position:+fixed;
++++++top:+50%25;
++++++left:+50%25;
++++++transform:+translate(-50%25,+-50%25);
++++}|code-block|syntax|javascript|82141|来源：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/|offset|length|82142|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/^0|0|0|3|2D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>This works regardless of the size of its contents</p>
<pre class="lang-css prettyprint-override"><code>.centered {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
</code></pre>
<p>source: <a href="https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/" rel="nofollow noreferrer">https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/</a></p>


blocks|key|299523|text|当在flexbox中使用页边距时，这种方法不会限制元素的宽度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|299524|top:+0;+left:+0;
transform:+translate(calc(50vw+-+50%25));|code-block|syntax|javascript|299525|也用于垂直居中。|299526|top:+0;+left:+0;
transform:+translate(calc(50vw+-+50%25),+calc(50vh+-+50%25));|299527|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This approach will not limit element's width when using margins in flexbox</p>
<pre><code>top: 0; left: 0;
transform: translate(calc(50vw - 50%));
</code></pre>
<p>Also for centering it vertically</p>
<pre><code>top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
</code></pre>


<p>I have a div that will have this CSS:</p>

<pre class="lang-css prettyprint-override"><code>#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}
</code></pre>

<p>Now, how can i make this div centered? I can use <code>margin-left: -450px; left: 50%;</code> but this will only work when the screen is > 900 pixels. After that (when the window is &lt; 900 pixels), it will no longer be centered. </p>

<p>I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?  </p>


Center fixed div with dynamic width (CSS)

容器

我有一个div，它将包含这个CSS：#some_kind_of_popup{    position: fixed;    top: 100px;    min-height: 300px;    width: 90%;    max-width: 900px;}现在，我如何让这个div居中呢？我可以使用margin-...

问具有动态宽度的中心固定div (CSS)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有动态宽度的中心固定div (CSS)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有动态宽度的中心固定div (CSS)
EN