您可以将此CSS应用于内部<div>:

#inner {
width: 50%;
margin: 0 auto;
}

#inner {
width: 50%;
margin: 0 auto;
}

当然,您不必设置width为50%.任何小于包含的宽度<div>都可以.该margin: 0 auto是什么呢实际定心.

如果你的目标是IE8 +,那么最好改为:

#inner {
display: table;
margin: 0 auto;
}

它将使内部元素水平居中,并且无需设置特定的工作width.

这里的工作示例:

#inner {
display: table;
margin: 0 auto;
border: 1px solid blac
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
k;

}

#outer {

border: 1px solid red;

width:100%

}
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>
<div>
<div>Foo foo</div>
</div>

• 您必须在html页面上使用!DOCTYPE标记才能使其在IE上运行良好.
• 请注意,可能需要添加"float:none;" 为#inner.
• 您还将顶部和底部边距设置为0,这是不相关的.最好把'margin-left:auto; margin-right:auto`我想.
• 不一定是'margin:0 auto`:它可以是`margin:<whatever_vertical_margin_you_need> auto` second是水平边距.
• 对于垂直居中,我通常使用"line-height"(line-height == height).这很简单,但它只使用一行内容文本:)
• 在某些情况下，有必要为内部div的边距样式编写`！important`子句，例如，当您编写了这样的`outer div {margin：0.5em;}
• 投票最多，但不是更好的解决方案。最好的方法是结合使用div和span标签，阻止css属性和跨浏览器inline-block的组合，文本中心将执行简单的设置

如果您不想在内部设置固定宽度,div可以执行以下操作:

#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}

这使得内部div成为可以居中的内联元素text-align.

• @SabaAhang正确的语法是`float:none;`并且可能只需要因为#inner从CSS中的其他地方继承了`left`或`right`的`float`.
• 这是一个很好的解决方案.请记住,内部将继承`text-align`,因此您可能希望将内部的`text-align`设置为`initial`或其他值.

最好的方法是使用CSS 3.

盒子型号:

#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}

根据您的可用性,您也可以使用这些box-orient, box-flex, box-direction属性.

Flex:

阅读有关居中子元素的更多信息

而这也解释了为什么盒模型是最好的办法:

• 为什么W3C盒型号更好？

• 在开始实施此解决方案之前,请务必先阅读[此答案](http://stackoverflow.com/a/16144913/1652962).
• Safari,截至目前,仍然需要`-webkit`标志用于flexbox(`display:-webkit-flex;`和`-webkit-align-items:center;`和`-webkit-justify-content:center;`)

假设您的div很200px宽:

.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}

确保父元素定位,即相对,固定,绝对或粘性.

如果您不知道div的宽度,可以使用transform:translateX(-50%);而不是负边距.

https://jsfiddle.net/gjvfxxdj/

我创建了这个例子来展示如何纵向和横向 align.

代码基本上是这样的:

#outer {
position: relative;
}

和...

#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}

center当你重新调整屏幕大小时它会保持不变.

• 对于这种方法+1,我正要回答它.请注意,您必须在要水平居中的元素上声明宽度(如果垂直居中,则为高度).这是一个全面的解释:http://codepen.io/shshaw/full/gEiDt.垂直和/或水平对中元素的多功能和广泛支持的方法之一.
• 你不能在div中使用填充,但如果你想给幻觉使用相同颜色的边框.

一些海报提到了CSS 3的中心使用方式display:box.

此语法已过时,不应再使用.[另见本文].

因此,为了完整起见,这是使用Flexible Box布局模块集中在CSS 3中的最新方式.

所以如果你有简单的标记,如:

<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>

...并且您希望将项目置于框中,这是您在父元素(.box)上所需的内容:

.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}

.box {
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}

<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>

如果您需要支持使用较旧语法的旧版浏览器,这里是一个很好看的地方.

• Flexbox规范经历了3次重大修订.最新的草案是从2012年9月开始的,该草案正式弃用了之前的所有草案.但是,浏览器支持很多(特别是旧的Android浏览器):http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox
• @WouterVanherck它取决于`flex-direction`值.如果是'row'(默认值) - 那么`justify-content:center; `用于水平对齐(就像我在答案中提到的那样)如果它是'column' - 那么`justify-content:center;`用于垂直对齐.

如果您不想设置固定宽度而不想要额外的边距,请添加display: inline-block到您的元素中.

您可以使用:

#element {
display: table;
margin: 0 auto;
}

• 与display:inline-block相同的要求(http://www.quirksmode.org/css/display.html)

以未知高度和宽度为中心

水平和垂直.它适用于相当现代的浏览器(Firefox,Safari/WebKit,Chrome,Internet Explorer 10,Opera等)

.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

<div>This works with any content</div>

在Codepen或JSBin上进一步修补它.

• This is the only one that works for perfect centering and will remain centered even after the contents in the div are modified.

如果不给它宽度,它就不能居中,否则默认情况下整个水平空间.

• 如果你不知道宽度？说因为内容是动态的？
• I use `width: fit-content;` and `margin: 0 auto`. I think this can work with unknown width.

CSS3的box-align属性

#outer {
width:100%;
height:100%;
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}

• 在开始实施此解决方案之前,请务必先阅读[此答案](http://stackoverflow.com/a/16144913/1652962).

设置width并设置margin-left和margin-right到auto.但这仅适用于横向.如果你想要两种方式,你只需要两种方式.不要害怕尝试; 它不像你会打破任何东西.

我最近不得不将一个"隐藏"的div(即display:none;)居中,其中有一个表格形式,需要在页面上居中.我编写了以下jQuery来显示隐藏的div然后将CSS更新为自动生成的表格宽度并更改边距以使其居中.(通过单击链接触发显示切换,但不需要显示此代码.)

注意:我正在分享此代码,因为Google将我带到了这个Stack Overflow解决方案,除了隐藏的元素没有任何宽度并且在显示之前无法调整大小/居中之外,一切都会有效.

$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="">
<table>
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>

我通常这样做的方式是使用绝对位置:

#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}

外部div不需要任何额外的财产来实现这一点.

对于Firefox和Chrome:

<div>
<div>Text</div>
</div>

<div>
<div>Text</div>
</div>

对于Internet Explorer,Firefox和Chrome:

该text-align:属性对于现代浏览器是可选的,但在Internet Explorer Quirks模式中对于旧版浏览器支持是必需的.

• 不需要text-align属性.这完全没有必要.

这是我的答案.

#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}

<div>
<div>Inner Content</div>
</div>

不必为其中一个元素设置宽度的另一个解决方案是使用CSS 3 transform属性.

#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

诀窍是translateX(-50%)将#inner元素设置为其自身宽度左侧的50%.您可以使用相同的技巧进行垂直对齐.

这是一个显示水平和垂直对齐的小提琴.

有关Mozilla Developer Network的更多信息.

• 也可能需要供应商前缀:`-webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -khtml-transform:translate(-50%,0); -o-transform:translate(-50%,0);`

Chris Coyier 在他的博客上撰写了一篇关于"未知中心" 的精彩文章.这是多种解决方案的综合.我发布了一个未在此问题中发布的内容.它有更多的浏览器支持,然后是flexbox解决方案,而你没有使用display: table;它可以破坏其他东西.

/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width:0;
overflow:hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}

我意识到我已经很晚了,但这是一个非常受欢迎的问题,我最近发现了一种我在这里没有提到的方法,所以我想我会记录它.

#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}

编辑:两个元素必须具有相同的宽度才能正常运行.

例如,请参阅以下链接和以下代码段:

div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}

如果父母下面有很多孩子,那么你的CSS内容必须像小提琴上的这个例子.

HTML内容看起来像这样:

<div>
<div> Foo Text </div>
<div> Foo Text </div>
<div> Foo Text </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> Foo Text </div>
</div>

然后在小提琴上看到这个例子.

最简单的方法:

#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}

<div>
<div>Blabla</div>
</div>

• 正如你的小提琴笔记，#inner 必须设置一个宽度。

仅水平居中

根据我的经验,水平居中框的最佳方法是应用以下属性:

容器:

• 应该有 text-align: center;

内容框:

• 应该有 display: inline-block;

演示:

.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}

<div>
<div>
Center this!
</div>
</div>

另见这个小提琴!

水平和垂直居中

根据我的经验,最好的办法居中的盒子既垂直和水平是使用一个额外的容器,并应用以下属性:

外容器:

• 应该有 display: table;

内部容器:

• 应该有 display: table-cell;
• 应该有 vertical-align: middle;
• 应该有 text-align: center;

内容框:

• 应该有 display: inline-block;

演示:

.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}

<div>
<div>
<div>
Center this!
</div>
</div>
</div>

另见这个小提琴!

You can do something like this

#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}

这也将#inner垂直对齐.如果你不想,删除display和vertical-align属性;

如果内容的宽度未知,您可以使用以下方法.假设我们有这两个元素:

• .outer - 全屏宽度
• .inner - 没有宽度设置(但可以指定最大宽度)

假设元素的计算宽度分别为1000px和300px.请按以下步骤操作:

1. 包裹.inner在里面.center-helper
2. 制作.center-helper内联块; 它变得与.inner300px宽相同.
3. .center-helper相对于其父母向右推50%; 这将其左侧置于500px wrt.外.
4. .inner相对于其父母向左推50%; 这将其左侧置于-150px wrt.中心帮手,这意味着它的左边是500 - 150 = 350px wrt.外.
5. 将溢出设置.outer为隐藏以防止水平滚动条.

演示:

body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}

body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}

<div>
<div>
<div>
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>

这是你想要的最短的方式.

的jsfiddle

#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}

• 它垂直居中.

文字对齐:中心

应用text-align: center内联内容在行框中居中.但是,由于内部div默认情况下width: 100%您必须设置特定宽度或使用以下之一:

• display: block
• display: inline
• display: inline-block

#inner {
display: inline-block;
}
#outer {
text-align: center;
}

保证金:0自动

使用margin: 0 auto是另一种选择,它更适合旧版浏览器的兼容性.它与...一起工作display: table.

#inner {
display: table;
margin: 0 auto;
}

Flexbox的

display: flex行为类似于块元素,并根据flexbox模型列出其内容.它适用于justify-content: center.

请注意: Flexbox与大多数浏览器兼容,但不是全部.有关浏览器兼容性的完整和最新列表,请参见此处.

#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}

转变

transform: translate允许您修改CSS可视化格式模型的坐标空间.使用它,元素可以被平移,旋转,缩放和倾斜.要水平居中,需要position: absolute和left: 50%.

#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}

<center> (已弃用)

标签<center>是HTML的替代品text-align: center.它适用于较旧的浏览器和大多数新浏览器,但由于此功能已过时且已从Web标准中删除,因此不被视为良好实践.

#inner {
display: inline-block;
}

<div>
<center>
<div>Foo foo</div>
</center>
</div>

您可以使用display: flex外部div和水平居中,您必须添加justify-content: center

#outer{
display: flex;
justify-content: center;
}

或者您可以访问w3schools - CSS flex Property获取更多想法.

好吧,我设法找到一个可能适合所有情况的解决方案,但使用JavaScript:

这是结构:

<div>
<div>Your content goes here!</div>
<div>Your content goes here!</div>
<div>Your content goes here!</div>
</div>

这是JavaScript代码段:

$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});

如果要在响应式方法中使用它,可以添加以下内容:

$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});

这个方法也可以正常工作:

div.container {
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center;     /* for vertical alignment   */
}

对于内部<div>,唯一的条件是它height并且width不得大于其容器的大小.

Flex拥有超过97%的浏览

#outer {
display: flex;
justify-content: center;
}

器支持覆盖率,可能是在几行内解决这类问题的最佳方法:

#outer {
display: flex;
justify-content: center;
}

#outer {
display: flex;
justify-content: center;
}

我找到了一个选项:

每个人都说使用:

margin: auto 0;

但还有另一种选择.为父div设置此属性.它随时都可以完美运行:

text-align: center;

text-align: center;

看,孩子去中心.

最后CSS给你:

#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}

试试玩吧

margin: 0 auto;

如果您也希望将文本居中,请尝试使用:

如果有人想要一个jQuery解决方案中心对齐这些div:

$(window).bind("load", function() {
var wwidth = $("#outer").width();
var width = $('#inner').width();
$('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

只需将此 CSS 内容添加到您的 CSS 文件中即可。它会自动将内容居中。

在 CSS 中水平对齐居中：

在 CSS 中垂直对齐 + 水平居中：

#outer {
display: flex;
justify-content: center;
align-items: center;
}

您可以像这样简单地使用Flexbox：

#outer {
display: flex;
justify-content: center
}

将Autoprefixer应用于所有浏览器支持：

#outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}

#outer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}

要不然

使用转换：

#inner {
position: absolute;
left: 50%;
transform: translate(-50%)
}

使用自动前缀：

#inner {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform:     translate(-50%);
transform:         translate(-50%)
}

对水平中心的一个非常简单且跨浏览器的答案是将此规则应用于父元素：

.parentBox {
display: flex;
justify-content: center
}

<div> <div>Foo foo</div> </div>

>我们可以使用FLEXBOX轻松实现此目的：

<div>
<div>Foo foo</div>
</div>

将div居中放置在div中水平：

将div垂直居中放置div：

#outer {
display: flex;
align-items: center;
}

并且，要使div在垂直和水平方向上完全居中：

#outer{
display: flex;
justify-content: center;
align-items: center;
}

希望它对您有所帮助。编码愉快！

我已将内联样式应用于内部div.使用这个.

可以使用CSS 3 Flexbox。使用 Flexbox 时有两种方法。

1. 设置父元素并向父元素display:flex;添加属性{justify-content:center; ,align-items:center;}。

#outer {
display: flex;
justify-content: center;
align-items: center;
}

2. 设置父项display:flex并添加margin:auto;到子项。

#outer {
display: flex;
}
#inner {
margin: auto;
}

CSS 3:

您可以在父容器上使用以下样式来均匀地水平分布子元素:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

一个很好的DEMO关于不同的值justify-content.

CanIUse:浏览器兼容性

试试吧!:

#containerdiv {
display: flex;
justify-content: space-between;
}
#containerdiv > div {
background-color: blue;
width: 50px;
color: white;
text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<div>88</div>
<div>77</div>
<div>55</div>
<div>33</div>
<div>40</div>
<div>45</div>
</div>
</body>
</html>

带网格

一个非常简单和现代的方法是使用display: grid：

div {
border: 1px dotted grey;
}
#outer {
display: grid;
place-items: center;
height: 50px; /* not necessary */
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<div>Foo foo</div>
</div>
</body>
</html>