---
title: 居中一个元素
slug: Web/CSS/Layout_cookbook/Center_an_element
translation_of: Web/CSS/Layout_cookbook/Center_an_element
---
<div>{{CSSRef}}</div>

<p class="summary">在这份指南中你将了解到把一个盒子居中放置在另一个之中的方法。在伸缩盒子模型(flexbox)出现之前，要做到同时垂直与水平居中是很困难的，而现在利用盒子对齐属性(Box Alignment)就很直截了当了。</p>

<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>

<h2 id="需求">需求</h2>

<p>把一个项目同时垂直与水平居中地放置在一个盒子中</p>

<h2 id="指南">指南</h2>

<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>

<div class="note">
<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">下载这份示例</a></p>
</div>

<h2 id="做出选择">做出选择</h2>

<p>要将一个盒子居中放置在另一个之中，我们需要让作为容器的盒子变成伸缩容器。再将 {{cssxref("align-items")}} 设置为 center 来实现块方向的轴(block axis)上的居中，并把 {{cssxref("justify-content")}} 设置为 center 来实现文字方向的轴(inline axis)上的居中。</p>

<p>将来我们可能不需要将父容器设置为伸缩容器就可以居中元素，因为此处使用的“盒子对齐”属性也被指定为适用于块布局。然而，当前在块布局上对盒子对齐属性的支持仍然是有限的，因此目前使用伸缩盒子来实现居中还是最可靠的方法。</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表</p>

<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<h4 id="align-items">align-items</h4>

<p>{{Compat("css.properties.align-items")}}</p>

<h4 id="justify-content">justify-content</h4>

<p>{{Compat("css.properties.justify-content")}}</p>

<h2 id="MDN上相关的资源">MDN上相关的资源</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
</ul>