blocks|key|1656173|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1656174|position:+fixed;
left:+50%25;
width:+50px;
margin-left:+-25px;+/*+width+÷+2+*/|code-block|syntax|javascript|1656175|Demo：http://jsfiddle.net/ymvDJ/3/|offset|length|style|BOLD|1656176|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ymvDJ/3/^0|0|0|0|4|5|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You can use

<pre><code>position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
</code></pre>

Demo: <a href="http://jsfiddle.net/ymvDJ/3/" rel="nofollow">http://jsfiddle.net/ymvDJ/3/</a>

blocks|key|579737|text|如果do想要固定头寸，那么添加以下规则并删除通常的保证金技巧：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|579738|left:+50%25;
margin-left:+-25px;+//+half+the+width+of+your+element|code-block|syntax|javascript|579739|请看这里：http://jsfiddle.net/8DfnG/2/|579740|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/8DfnG/2/^0|2|2|0|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

If you do want the position to be fixed, add these rules and drop the usual margin trick:

<pre><code>left: 50%;
margin-left: -25px; // half the width of your element
</code></pre>

See it here: <a href="http://jsfiddle.net/8DfnG/2/" rel="nofollow">http://jsfiddle.net/8DfnG/2/</a>

blocks|key|1656123|text|删除position:+fixed，将width更改为50px，并确保在margin:+auto中的auto之前有一个0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1656124|更新：|BOLD|1656125|要使div与窗口一样高，请确保将body和html设置为height:+100%25;：|1656126|body,+html+{
++height:+100%25:
}|code-block|syntax|javascript|1656127|又一次更新了|1656128|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ymvDJ/4/^0|2|F|J|5|R|4|10|C|1E|4|1N|1|0|0|3|0|G|4|L|4|S|D|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1M|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|R|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

Remove <code>position: fixed</code>, change the <code>width</code> to <code>50px</code> and make sure you have a <code>0</code> before <code>auto</code> in <code>margin: auto</code>.

Update:

To have the div be as high as the window, be sure to set the <code>body</code> and <code>html</code> to <code>height: 100%;</code> too:

<pre><code>body, html {
 height: 100%:
}
</code></pre>

<a href="http://jsfiddle.net/ymvDJ/4/" rel="nofollow">Updated jsfiddle again</a>

blocks|key|1656153|text|这个HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1656154|<div+id="grayinnerbackground">
++++foo
</div>|code-block|syntax|javascript|1656155|CSS：|1656156|div#grayinnerbackground+{
++++++++++++margin:+auto;
++++++++++++width:+50px;
++++++++++++background-color:+#ccc;
++++++++++++height:+100%25;
}|1656157|我不太清楚为什么它不起作用，直到我把文本放到div中，现在检查一些东西。|1656158|更新|offset|length|style|BOLD|1656159|好吧，我累了。如果div是空的，并且您的高度为100%25，那么在本例中它将是它的父级<body>的100%25。由于没有其他内容，所以<body>的高度为0。给<div>一个绝对的高度，它就会弹出：|CODE|1656160|div#grayinnerbackground+{
++++++++++++margin:+auto;
++++++++++++width:+50px;
++++++++++++background-color:+#ccc;
++++++++++++height:+10px;
}|1656161|entityMap^0|0|0|0|0|0|0|2|0|15|6|1S|6|25|5|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|14|8|@$O|15|P|16|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|17|8|@$O|18|P|19|Q|U]|$O|1A|P|1B|Q|U]|$O|1C|P|1D|Q|U]]|9|@]|A|$]]|$1|V|3|W|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|X|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|Y|$]]

This this HTML:

<pre><code>&lt;div id="grayinnerbackground"&gt;
 foo
&lt;/div&gt;
</code></pre>

CSS:

<pre><code>div#grayinnerbackground {
 margin: auto;
 width: 50px;
 background-color: #ccc;
 height: 100%;
}
</code></pre>

I'm not entirely sure why it didn't work until I put text into the div, checking something now.

UPDATE

Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <code>&lt;body&gt;</code> in this case. Since there is no other content, the <code>&lt;body&gt;</code> has a height of 0. Give the <code>&lt;div&gt;</code> an absolute height, and it will pop in:

<pre><code>div#grayinnerbackground {
 margin: auto;
 width: 50px;
 background-color: #ccc;
 height: 10px;
}
</code></pre>

blocks|key|579751|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|579752|position:+relative+|code-block|syntax|javascript|579753|如果这仍然不起作用，您可能还需要添加以下内容：|579754|display:+block;|579755|“位置:固定”是指无论它停留在x和y坐标上。|579756|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use:

<pre><code>position: relative 
</code></pre>

If that still doesn't work you may need to add this as well:

<pre><code>display: block;
</code></pre>

"position: fixed" means that no matter what it stays at a x and y coordinate.

blocks|key|579772|text|你可以试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|579773|div#grayinnerbackground+{
++++margin:+auto;
++++position:+absolute;
++++top:+0;+left:+0;+bottom:+0;+right:+0;
++++width:+50px;
++++background-color:+#D9D9D9;
++++height:+100%25;
}|code-block|syntax|javascript|579774|http://jsfiddle.net/g49Mb/|offset|length|579775|关于这里工作的更多信息：http://codepen.io/shshaw/full/gEiDt|579776|entityMap|0|LINK|mutability|MUTABLE|url|1|http://codepen.io/shshaw/full/gEiDt^0|0|0|0|Q|0|0|C|Z|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|M|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|H]]|T|$5|P|Q|R|A|$S|U]]]]

You can try this

<pre><code>div#grayinnerbackground {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 width: 50px;
 background-color: #D9D9D9;
 height: 100%;
}
</code></pre>

<a href="http://jsfiddle.net/g49Mb/" rel="nofollow">http://jsfiddle.net/g49Mb/</a>

More about the working here: <a href="http://codepen.io/shshaw/full/gEiDt" rel="nofollow">http://codepen.io/shshaw/full/gEiDt</a>

I need the div to be in the center of the page at all times whether user resizes webpage or not.

I have tried using:
 margin: auto;
 margin: 0 auto;
 margin-left: auto; margin-right auto;

but neither of those three worked.

HTML:

<pre><code>&lt;div id="grayinnerbackground"&gt;
&lt;/div&gt;
</code></pre>

CSS:

<pre><code>div#grayinnerbackground {
 margin: auto;
 width:1000px;
 background-color: #D9D9D9;
 height: 100%;
 position: fixed;
 z-index: -1;
}
</code></pre>

Here is a fiddle for an example of what I'm talking about. 
<a href="http://jsfiddle.net/ymvDJ/" rel="nofollow">http://jsfiddle.net/ymvDJ/</a>

Thanks.

Getting div to center on page

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

我需要的div在任何时候都在页面的中心，无论用户是否调整网页大小。我试过:边距:自动；边距:0自动；边距-左:自动；边距-右转；但这三个都不起作用。HTML：<div id="grayinnerbackground"></div>CSS：div#grayinnerbackground { margin: auto; width:1000px;

问使div在页面上居中
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使div在页面上居中EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使div在页面上居中
EN