blocks|key|267225|text|这在IE8中不起作用，但可能是一个需要考虑的选项。如果您不想指定宽度，它主要是有用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267226|.element
{
++position:+absolute;
++left:+50%25;
++transform:+translateX(-50%25);
}|code-block|syntax|javascript|267227|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This doesn't work in IE8 but might be an option to consider. It is primarily useful if you do not want to specify a width.</p>

<pre><code>.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</code></pre>


blocks|key|267270|text|Flexbox？您可以使用flexbox。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267271|​|267272|.box+{
++display:+-ms-flexbox;
++display:+-webkit-flex;
++display:+flex;
++
++-webkit-justify-content:+center;
++justify-content:+center;

}

.box+div+{
++border:1px+solid+grey;
++flex:+0+1+auto;
++align-self:+auto;
++background:+grey;
}|code-block|syntax|javascript|267273|<div+class="box">
++<div+class="A">I'm+horizontally+centered.</div>
</div>|267274|267275|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Flexbox?  You can use flexbox.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  &lt;div class="A"&gt;I'm horizontally centered.&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|50629|text|.centerDiv+{
++++position:+absolute;
++++left:+0;
++++right:+0;
++++margin:+0+auto;
++++text-align:center;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|50630|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
</code></pre>


blocks|key|267298|text|所以很简单，只需使用空白处和left，right属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267299|.elements+{
+position:+absolute;
+margin-left:+auto;
+margin-right:+auto;
+left:+0;
+right:+0;
}|code-block|syntax|javascript|267300|您可以在本技巧=>+How+to+set+div+element+to+center+in+html-+Obinb+blog中看到更多信息|offset|length|267301|entityMap|0|LINK|mutability|MUTABLE|url|http://www.obinb.com/2016/10/huong-dan-viet-css-tu-ong-can-giua-div.html^0|0|0|A|1G|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>so easy, only use margin and left, right properties:</p>

<pre><code>.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}
</code></pre>

<p>You can see more in this tip => <a href="http://www.obinb.com/2016/10/huong-dan-viet-css-tu-ong-can-giua-div.html" rel="nofollow">How to set div element to center in html- Obinb blog</a></p>


blocks|key|50742|text|这是一个链接，如果位置是绝对的，请使用此链接使div位于中心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|50743|HTML：|50744|<div+class="bar"></div>|code-block|syntax|javascript|50745|CSS：|50746|.bar{
++width:200px;
++border-top:4px+solid+red;
++position:absolute;
++margin-left:auto;
++margin-right:auto;
++left:0;
++right:0;
}|50747|Example+jsfiddle|offset|length|50748|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/amitq7000/wdt3v4px/1/?utm_source=website&utm_medium=embed&utm_campaign=wdt3v4px#&togetherjs=L8KAH6Ijxo^0|0|0|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Here is a link please use this to make the div in the center if position is absolute.</p>

<p>HTML: </p>

<pre><code>&lt;div class="bar"&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}
</code></pre>

<p><a href="https://jsfiddle.net/amitq7000/wdt3v4px/1/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=wdt3v4px#&amp;togetherjs=L8KAH6Ijxo" rel="nofollow noreferrer">Example jsfiddle</a></p>


blocks|key|50811|text|竖直居中和水平居中均使用left:50%25;top:50%25;+transform:+translate(-50%25,+-50%25);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|50812|​|50813|.centeredBox+{
++++margin:+0+auto;
++++left:+50%25;
++++top:50%25;
+++
+++
+++/**+Position+should+be+absolute+*/
++++position:+absolute;
++++/**+And+box+must+have+a+width,+any+width+*/
++++width:+40%25;
++++background:+#faebd7;
++++text-align:+center;
++++padding:10px;
++++transform:+translate(-50%25,+-50%25);
+++
+++}|code-block|syntax|javascript|50814|<div+class="centeredBox">Centered+Box</div>|50815|50816|entityMap^0|C|1F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Both center vertically and horizontally
use <code>left:50%;top:50%; transform: translate(-50%, -50%);</code></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);
   
   }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="centeredBox"&gt;Centered Box&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|50586|text|你不能在position:absolute;元素上使用margin:auto;，如果你不需要它，就删除它，但是，如果你需要，你可以使用left:30%25;+((100%25-40%25)/2)和媒体查询来获得最大值和最小值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|50587|.container+{
++++position:+absolute;
++++top:+15px;
++++left:+30%25;
++++z-index:+2;
++++width:40%25;
++++height:+60px;
++++overflow:+hidden;
++++background:+#fff;
}

@media+all+and+(min-width:960px)+{

++++.container+{
++++++++left:+50%25;
++++++++margin-left:-480px;
++++++++width:+960px;
++++}

}

@media+all+and+(max-width:600px)+{

++++.container+{
++++++++left:+50%25;
++++++++margin-left:-300px;
++++++++width:+600px;
++++}

}|code-block|syntax|javascript|50588|entityMap^0|4|I|R|C|1V|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>You can't use <code>margin:auto;</code> on <code>position:absolute;</code> elements, just remove it if you don't need it, however, if you do, you could use <code>left:30%;</code> ((100%-40%)/2) and media queries for the max and min values:</p>

<pre><code>.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}
</code></pre>


<p>I've a div and want it to be centered horizontally - although I'm giving it <code>margin:0 auto;</code> it's not centered...</p>

<pre><code>.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}
</code></pre>


How to center absolute div horizontally using CSS?

我有一个div，并希望它水平居中-尽管我给它margin:0 auto;，但它没有居中…….container {    position: absolute;    top: 15px;    z-index: 2;    width:40%;    max-width: 960px;    min-width: 600px;    height: 60px;    overflow: hidd

问如何使用CSS将绝对div水平居中？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS将绝对div水平居中？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS将绝对div水平居中？
EN