blocks|key|1930491|text|如果你知道div的高度/宽度(例如，它将是100px+x+200px)，那么你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1930492|#cent+{
++position:absolute;
++top:50%25;
++left:50%25;
++margin-top:-50px;+/*+this+is+half+the+height+of+your+div*/++
++margin-left:-100px;+/*this+is+half+of+width+of+your+div*/
}|code-block|syntax|javascript|1930493|更新:另一个选项:查看http://www.w3.org/Style/Examples/007/center+(垂直居中)|offset|length|1930494|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/Style/Examples/007/center^0|0|0|B|17|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>If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:</p>

<pre><code>#cent {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}
</code></pre>

<p>UPDATE: another option: see <a href="http://www.w3.org/Style/Examples/007/center" rel="noreferrer">http://www.w3.org/Style/Examples/007/center</a> (Centering vertically)</p>


blocks|key|4041020|text|我知道这个问题很老了，但我偶然发现了它，将来我可能会再次寻找它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4041021|在我的例子中，内容的高度是可变的，并且我不想使用绝对定位，所以我使用了flexbox容器。你只需要将你的内容包装在一个div中，风格如下：|4041022|.container+{
++min-height:+100vh;+/*+minimum+height+=+screen+height+*/
++display:+flex;
++justify-content:+center;
++align-items:+center;
}|code-block|syntax|javascript|4041023|示例：https://codepen.io/alephao/pen/mdPRYqZ|offset|length|4041024|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/alephao/pen/mdPRYqZ^0|0|0|0|3|12|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I know this question is pretty old, but I stumbled upon it, and I'll probably look for it again in the future.</p>
<p>In my case, the content has a variable height, and I don't want to use absolute positioning, so I used a flexbox container instead. You just need to wrap your content inside a div with the following style:</p>
<pre><code>.container {
  min-height: 100vh; /* minimum height = screen height */
  display: flex;
  justify-content: center;
  align-items: center;
}
</code></pre>
<p>Example: <a href="https://codepen.io/alephao/pen/mdPRYqZ" rel="nofollow noreferrer">https://codepen.io/alephao/pen/mdPRYqZ</a></p>


blocks|key|1930639|text|我知道这个问题已经有9年的历史了，但9年后偶然发现了这个问题，也许其他人也可以这么做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1930640|这是我的工作解决方案：|offset|length|style|BOLD|1930641|#cent+{
++position:+absolute;
++width:+500px;
++height:+500px;
++top:+0;
++bottom:+0;
++left:+0;
++right:+0;
++margin:+auto;
}|code-block|syntax|javascript|1930642|通过这样做，它会将width和height设置为500px，然后将top、left、right和bottom约束设置为0，最后，通过将边距设置为auto，该框将被放在窗口的正中间。这也将是响应性的。|CODE|1930643|entityMap^0|0|0|B|0|0|9|5|F|6|X|3|11|4|16|5|1C|6|20|4|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|W|8|@$D|X|E|Y|F|O]|$D|Z|E|10|F|O]|$D|11|E|12|F|O]|$D|13|E|14|F|O]|$D|15|E|16|F|O]|$D|17|E|18|F|O]|$D|19|E|1A|F|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Q|$]]

<p>I know this question is 9 years old, but having stumbled upon it 9 years later, maybe someone else could do the same.</p>

<p><strong>This is my working solution:</strong></p>

<pre><code>#cent {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</code></pre>

<p>By doing this  it will set the <code>width</code> and <code>height</code> to 500px, then it will set the <code>top</code>, <code>left</code>, <code>right</code> and <code>bottom</code> constraints to 0, and finally, by setting the margins to <code>auto</code>, the box will be put in the exact middle of the window. This will also be responsive.</p>


blocks|key|5459196|text|将注释添加到naivists的链接(到w3c提示站点)：display:table-cell不能与height:100%25一起工作。因此，如果你想在页面上垂直居中一个元素，你不知道它的高度，你需要把它放到一个包含display:table和height:100%25的容器中，以及另一个包含display:table-cell和vertical-align:middle的容器中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5459197|此外，如果想要水平居中，则需要将width:100%25指定给外容器body，并将text-align:center指定给内容器。内容应该有display:inline-block，并且要重置对齐，请使用text-align:left。|5459198|最终，它变得如下：|5459199|<style>
#vcontainer+{
++display:+table;
++height:+100%25;
++width:+100%25;
}
#hcontainer+{
++display:+table-cell;
++vertical-align:+middle;
++text-align:+center;
}
#content+{
++display:+inline-block;
++border:+lightGray+1px+solid;
++background-color:+lightBlue;
++text-align:+left;
}
</style>
<body>
++<div+id="vcontainer"><div+id="hcontainer">
++++<div+id="content">
++++++Hoyjo!<br>
++++++I+have+returned+to+my+hometown!<br>
++++++Lolololo+lololo+lololo+lololo+lololo!<br>
++++</div>
++</div></div>
</body>|code-block|syntax|javascript|5459200|我不能保证它能在传统浏览器(IE6/7)上工作。只要它运行在IE8标准上，它就可以在IE8上工作(是的，这会让你抓狂的。谢谢，MS!)，你必须把height:100%25给<html>和<body>。|5459201|entityMap^0|S|I|1D|B|2X|D|3B|B|3Y|I|4H|L|0|G|A|13|H|1W|K|2S|F|0|0|0|20|B|2C|6|2J|6|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$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]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|R|$]]

<p>Adding notes to naivists' link (to w3c tips site):
<code>display:table-cell</code> does not work with <code>height:100%</code>. So, if you want to vertically center an element, which you don't know its height, on a page, you need to put it inside a container with <code>display:table</code> and <code>height:100%</code>, and another container with <code>display:table-cell</code> and <code>vertical-align:middle</code>.</p>

<p>Furthermore, if you want to center it horizontally, you need to specify <code>width:100%</code> to body, the outer container, and give <code>text-align:center</code> to inner container. The content should have <code>display:inline-block</code>, and to reset alignment, <code>text-align:left</code>.</p>

<p>Ultimately, it becomes as follows:</p>

<pre><code>&lt;style&gt;
#vcontainer {
  display: table;
  height: 100%;
  width: 100%;
}
#hcontainer {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#content {
  display: inline-block;
  border: lightGray 1px solid;
  background-color: lightBlue;
  text-align: left;
}
&lt;/style&gt;
&lt;body&gt;
  &lt;div id="vcontainer"&gt;&lt;div id="hcontainer"&gt;
    &lt;div id="content"&gt;
      Hoyjo!&lt;br&gt;
      I have returned to my hometown!&lt;br&gt;
      Lolololo lololo lololo lololo lololo!&lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>I cannot guarantee it will work on legacy browsers (IE6/7). It will work on IE8 provided it runs on IE8 standards (yes, this will screw your mind. Thanks, MS!), and you must give <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> the <code>height:100%</code>.</p>


blocks|key|5459250|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5459251|<div+id="box"></div>+++|code-block|syntax|javascript|5459252|CSS：|5459253|#box{
background-color:+green;
width:100px;
height:100px;
margin:auto;+/*This+will+center+it+horizontally+but+not+vertically*/
}|5459254|注意id+"box“周围的引号或双引号，你需要它们。|5459255|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|$]]

<p>HTML:</p>

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

<p>CSS:</p>

<pre><code>#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*This will center it horizontally but not vertically*/
}
</code></pre>

<p>Watch out of the quotes or double quotes around the id "box", you need them.</p>


blocks|key|4040778|text|+<div+id="content"
+++++++++++++++++style="text-align:+center;
+++++++++++++++++vertical-align:+middle;
+++++++++++++++++border-color:+#000000;
+++++++++++++++++border-width:+1px;
+++++++++++++++++border-style:+solid;
+++++++++++++++++margin-top:+25%25;
+++++++++++++++++margin-bottom:+25%25;">
++++++++++++++++hi
++++++++++++</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4040779|这对我很有效..。|unstyled|4040780|编辑:这将对齐整个div...不管div或页面的大小如何...假设这个id是整个页面中唯一的div+...|4040781|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|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code> &lt;div id="content"
                 style="text-align: center;
                 vertical-align: middle;
                 border-color: #000000;
                 border-width: 1px;
                 border-style: solid;
                 margin-top: 25%;
                 margin-bottom: 25%;"&gt;
                hi
            &lt;/div&gt;
</code></pre>

<p>This worked for me...</p>

<p>Edit : This will align the whole div... regardless of the size of the div or the page... Assuming that this id the only div in the whole page...</p>


blocks|key|5459274|text|如果你想要上面的中间部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5459275|HTML：|5459276|<div+class="cent">
++
</div>|code-block|syntax|javascript|5459277|CSS：|5459278|.cent+{
++align:+center;
}|5459279|如果您想要直接居中，使用相同的HTML，但将CSS更改为：|5459280|.cent+{
++align:+center;
++position:+absolute;
++top:+40%25;
++left:+45%25;
}|5459281|示例代码：jsfiddle.net/Lzdvnk29+(如果您|offset|length|5459282|查看它，但如果它是一个完整的HTML页面，它将直接显示在中间)|5459283|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Lzdvnk29^0|0|0|0|0|0|0|0|5|L|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$S|1C|T|1D|1|1E]]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>If you want the top middle:<br />
HTML:</p>

<pre><code>&lt;div class="cent"&gt;
  &lt;!-- code --&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:<br /></p>

<pre><code>.cent {
  align: center;
}
</code></pre>

<p>and if you want direct middle, use the same HTML but change the CSS to:</p>

<pre><code>.cent {
  align: center;
  position: absolute;
  top: 40%;
  left: 45%;
}
</code></pre>

<p>Example Code: <a href="http://jsfiddle.net/Lzdvnk29" rel="nofollow noreferrer">jsfiddle.net/Lzdvnk29</a> (it may not look centered if you<br />
look at it, but if it is a full HTML page it will show in the direct middle)</p>


blocks|key|4040923|text|下面是操作步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4040924|#cent
{
++++margin-left:50px;
++++margin-right:50px;
}|code-block|syntax|javascript|4040925|现在你的div从左到右将是50px，并且居中放置在任何容器中。|4040926|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here's how:</p>

<pre><code>#cent
{
    margin-left:50px;
    margin-right:50px;
}
</code></pre>

<p>Now your div is going to be 50px from left and right and centered in whatever container you have it in.</p>


blocks|key|4040928|text|position:+absolute;
top:+0;
right:+0;
bottom:+0;
left:+0;
margin:+auto;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4040929|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>position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
</code></pre>


<p>I want to center a div right in the middle of the page, I tried <code>top:30%</code>, but when the window is resized off the alignment.</p>

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

<p>Thanks
Jean</p>


center a div box in the middle of the page using css

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想要在页面中间居中放置一个div，我尝试了top:30%，但当窗口调整大小时偏离对齐方式。<div id=cent></div>谢谢，吉恩

问使用css在页面中间居中放置div框
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css在页面中间居中放置div框EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css在页面中间居中放置div框
EN