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

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

当然，您不必将width设置为50%。任何小于包含<div>的宽度都可以。margin: 0 auto是实际居中的内容。

如果你的目标是Internet Explorer 8（及更高版本），最好改为：

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

它将使内部元素水平居中，并且无需设置特定的width即可工作。

这里的工作示例：

#inner {display: table;margin: 0 auto;border: 1px solid black;}
#outer {border: 1px solid red;width:100%}

<div id="outer"><div id="inner">Foo foo</div></div>

编辑

使用flexbox可以很容易地将div水平和垂直居中。

#inner {border: 0.05em solid black;}
#outer {border: 0.05em solid red;width:100%;display: flex;justify-content: center;}

<div id="outer"><div id="inner">Foo foo</div></div>

要将div垂直居中对齐，请使用属性align-items: center。

如果不给它一个宽度，它就不能居中。否则，默认情况下，它将占用整个水平空间。

设置width并将margin-left和margin-right设置为auto。不过，这是仅用于水平。如果你想要两种方式，你只需要两种方式。不要害怕尝试；你不会破坏任何东西。

如果你不想在内部div上设置固定的宽度，你可以这样做：

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

<div id="outer"><div id="inner">Foo foo</div></div>

这使得内部div成为一个内联元素，可以以text-align为中心。

我最近不得不将一个“隐藏”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 id="inner" style="display:none;"><form action=""><table id="innerTable"><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>

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

<div id="outer" style="width:200px"><div id="centered">Foo foo</div></div>

确保父元素是定位，即相对、固定、绝对或粘性。

如果您不知道div的宽度，可以使用transform:translateX(-50%);代替负边距。

使用CSS calc（），代码可以变得更简单：

.centered {width: 200px;position: absolute;left: calc(50% - 100px);}

原理还是一样的；把物品放在中间，补偿宽度。

CSS 3的box对齐属性

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

如果您不想设置固定宽度并且不想要额外的边距，请将display: inline-block添加到您的元素中。

您可以使用：

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

对于Firefox和Chrome：

<div style="width:100%;"><div style="width: 50%; margin: 0px auto;">Text</div></div>

对于Internet Explorer、Firefox和Chrome：

<div style="width:100%; text-align:center;"><div style="width: 50%; margin: 0px auto; text-align:left;">Text</div></div>

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

最好的方法是使用CSS3。

旧盒子模型（已弃用）

display: box及其属性box-pack、box-align、box-orient、box-direction等已被flexbox取代。虽然它们可能仍然有效，但不建议在生产中使用。

#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%;}

<div id="outer"><div id="inner">Foo foo</div></div>

根据您的可用性，您也可以使用box-orient, box-flex, box-direction属性。

使用Flexbox的现代盒子模型

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

阅读更多关于居中子元素

• 链接2

• 链接3

• 链接4

这就解释了为什么盒子模型是最好的方法：

• 为什么W3C盒模型被认为更好？

居中：自动宽度边距

此框通过将其左右边距宽度设置为“自动”来水平居中。这是使用CSS完成水平居中的首选方法，并且在大多数支持CSS 2的浏览器中运行良好。不幸的是，Internet Explorer 5/Windows不响应此方法-该浏览器的缺点，而不是技术。

有一个简单的解决方法。（在你反击这个词引起的恶心时停顿一下。）准备好了吗？Internet Explorer 5/Windows错误地将CSS“text-的对齐”属性应用于块级元素。为包含块级元素（通常是BODY元素）声明“text-的对齐：中心”水平居中Internet Explorer 5/Windows中的框。

此解决方法有一个副作用：继承了CSS“文本对齐”属性，将内联内容居中。通常需要为居中框显式设置“文本对齐”属性，以抵消Internet Explorer 5/Windows解决方法的效果。相关的CSS如下。

body {margin: 50px 0px;padding: 0px;text-align: center;}
#Content {width: 500px;margin: 0px auto;text-align: left;padding: 15px;border: 1px dashed #333;background-color: #EEE;}

http://bluerobot.com/web/css/center1.html

我通常使用的方法是使用绝对位置：

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

外部div不需要任何额外的属性来工作。

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

此语法已过时，不应再使用。[另请参阅这篇文章]。

因此，为了完整起见，这里是使用灵活的盒子布局模块在CSS 3中居中的最新方法。

所以如果你有简单的标记，比如：

<div class="box"><div class="item1">A</div><div class="item2">B</div><div class="item3">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 class="box"><div class="item1">A</div><div class="item2">B</div><div class="item3">C</div></div>

如果您需要支持使用flexbox这是旧语法的旧浏览器，这是一个不错的地方。

我最近找到了一个方法：

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

两个元素必须具有相同的宽度才能正常工作。

我已经将内联样式应用于内部div。使用这个：

<div id="outer" style="width:100%"><div id="inner" style="display:table;margin:0 auto;">Foo foo</div></div>

用途：

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

<div id="outerDiv"><div id="innerDiv">Inner Content</div></div>

我创建了这个例子来展示如何垂直和水平align。

代码基本上是这样的：

#outer {position: relative;}

和…

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

它将留在center，即使你调整你的屏幕。

对#inner div使用以下CSS内容：

#inner {width: 50%;margin-left: 25%;}

我主要使用这个CSS内容来居中div。

你可以做这样的事

#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属性；

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, canalso be of any width and height */.inner {display: inline-block;vertical-align: middle;width: 300px;}

我最近发现了一件好事，混合使用line-height+vertical-align和50%左技巧，你可以center一个动态大小的盒子在另一个动态大小的盒子里，在水平和垂直使用纯CSS。

请注意，您必须使用跨度（和inline-block），在现代浏览器+Internet Explorer 8中进行了测试。超文本标记语言：

<h1>Center dynamic box using only css test</h1><div class="container"><div class="center"><div class="center-container"><span class="dyn-box"><div class="dyn-head">This is a head</div><div class="dyn-body">This is a body<br />Content<br />Content<br />Content<br />Content<br /></div></span></div></div></div>

css：

.container {position: absolute;left: 0;right: 0;top: 0;bottom: 0;overflow: hidden;}
.center {position: absolute;left: 50%;top: 50%;}
.center-container {position: absolute;left: -2500px;top: -2500px;width: 5000px;height: 5000px;line-height: 5000px;text-align: center;overflow: hidden;}
.dyn-box {display: inline-block;vertical-align: middle;line-height: 100%;/* Purely asthetic below this point */background: #808080;padding: 13px;border-radius: 11px;font-family: arial;}
.dyn-head {background: red;color: white;min-width: 300px;padding: 20px;font-size: 23px;}
.dyn-body {padding: 10px;background: white;color: red;}

看这里的例子

试着玩弄

margin: 0 auto;

如果您也想将文本居中，请尝试使用：

text-align: center;

我找到了一个选项：

每个人都说要使用：

margin: auto 0;

但是还有另一种选择。为父div设置此属性。它任何时候都可以完美运行：

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 */}

<center>

我被已知的最简单的中心宠坏了？

</center>

例如，请参阅此链接和下面的代码片段：

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. */}

<div id="outer" style="width:100%;"><div id="inner">Foo foo</div></div>

如果你有很多孩子在一个父下面，那么你的CSS内容必须像这样小提琴上的例子。

超文本标记语言内容看起来像这样：

<div id="outer" style="width:100%;"><div class="inner"> Foo Text </div><div class="inner"> Foo Text </div><div class="inner"> Foo Text </div><div class="inner"> </div><div class="inner"> </div><div class="inner"> </div><div class="inner"> </div><div class="inner"> </div><div class="inner"> Foo Text </div></div>

看看这个小提琴上的例子。

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

• .outer--全宽
• .inner--未设置宽度（但可以指定最大宽度）

假设元素的计算宽度分别为1000像素和300像素。如下所示：

1. 把.inner包在.center-helper里面
2. 使.center-helper成为一个内联块；它变得与.inner相同，使其宽300像素。
3. 将.center-helper向右推50%到其父级；这将其左侧设置为500像素。
4. 将.inner向左推50%；这将使其左侧位于-150像素（宽）。中心助手，这意味着它的左侧位于500-150=350像素（宽）。外。
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;}

<div class="outer"><div class="center-helper"><div class="inner"><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 % );}

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

下面是结构：

<div class="container"><div class="content">Your content goes here!</div><div class="content">Your content goes here!</div><div class="content">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);})});

我知道我回答这个问题有点晚了，我没有费心去阅读每一个答案，所以这个可能是重复的。

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

将未知高度和宽度的div居中

它适用于相当现代的浏览器（Firefox，Safari /WebKit，Chrome，Internet&Explorer&10，Opera等）

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

<div class="content">This works with any content</div>

Tinker with it further on Codepen or on JSBin.

试试这个：

<div id="a"><div id="b"></div></div>

css：

#a{border: 1px solid red;height: 120px;width: 400px}
#b{border: 1px solid blue;height: 90px;width: 300px;position: relative;margin-left: auto;margin-right: auto;}

最简单的方法：

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

<div id="outer"><div id="inner">Blabla</div></div>

我只是使用最简单的解决方案，但它适用于所有浏览器：

<!doctype html><html><head><meta charset="utf-8"><title>center a div within a div?</title><style type="text/css">*{margin: 0;padding: 0;}
#outer{width: 80%;height: 500px;background-color: #003;margin: 0 auto;}
#outer p{color: #FFF;text-align: center;}
#inner{background-color: #901;width: 50%;height: 100px;margin: 0 auto;
}
#inner p{color: #FFF;text-align: center;}</style></head>
<body><div id="outer"><p>this is the outer div</p><div id="inner"><p>this is the inner div</p></div></div></body></html>

如果有人想为中心对齐这些div的jQuery解决方案：

$(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;");});

首先：你需要给第二个div一个宽度：

例如：

超文本标记语言

<div id="outter"><div id="inner"Centered content"></div</div>

css：

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

请注意，如果您没有给它一个宽度，它将占用该行的整个宽度。

而不是多个包装器和/或自动边距，这个简单的解决方案适合我：

<div style="top: 50%; left: 50%;height: 100px; width: 100px;margin-top: -50px; margin-left: -50px;background: url('lib/loading.gif') no-repeat center #fff;text-align: center;position: fixed; z-index: 9002;">Loading...</div>

它将div放在视图的中心（垂直和水平），大小和调整大小，将背景图像居中（垂直和水平），将文本居中（水平），并将div保留在视图中和内容顶部。

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

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

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

这是一个小提琴表示水平和垂直对齐。

更多信息在Mozilla开发者网络。

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

试试下面的CSS代码：

<style>#outer {display: inline-block;width: 100%;height: 100%;text-align: center;vertical-align: middle;}
#outer > #inner {display: inline-block;font-size: 19px;margin: 20px;max-width: 320px;min-height: 20px;min-width: 30px;padding: 14px;vertical-align: middle;}</style>

通过下面的超文本标记语言代码应用于CSS之上，水平居中和垂直居中（又名：在中间垂直对齐）:

<div id="outer"><div id="inner">...These <div>ITEMS</div> <img src="URL"/> are in center...</div></div>

应用CSS和使用上述超文本标记语言后，网页中的该部分如下所示：

BEFORE applying code:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃V..Middle & H..Center        ┣━1┃                             ┣━2┃                             ┣━3┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛1      2      3      4      5
AFTER:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃                             ┣━1┃    V..Middle & H..Center    ┣━2┃                             ┣━3┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛1      2      3      4      5

所以接近最小的CSS代码是这些：

<style>#outer {width: 100%;text-align: center;}
#outer > .inner2 {display: inline-block;}</style>

通过下面的超文本标记语言代码应用上面的CSS，居中（水平）:

<div id="outer"><img class="inner2" src="URL-1"> <img class="inner2" src="URL-2"></div>

应用CSS并使用上述超文本标记语言后，网页中的该行如下所示：

BEFORE applying code:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃┍━━━━━━━━━━┑                     ┃┃│ img URL1 │                     ┃┃┕━━━━━━━━━━┙                     ┃┃┍━━━━━━━━━━┑                     ┃┃│ img URL2 │                     ┃┃┕━━━━━━━━━━┙                     ┃┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃    ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑    ┣━1┃    │ img URL1 │ │ img URL2 │    ┣━2┃    ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙    ┣━3┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛1       2       3       4       5

<style>#outer {width: 100%;text-align: center;}
#outer > img, #outer > div {display: inline-block;}</style>

因此，上面的CSS可以像下面一样应用于“外部”包装器内的中心项目（水平）：

<div id="outer"><img src="URL-1"> Text1 <img src="URL-2"> Text2</div>

应用CSS并使用上述超文本标记语言后，网页中的该行如下所示：

BEFORE applying code:┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃┍━━━━━━━━┑                ┃┃│img URL1│                ┃┃┕━━━━━━━━┙                ┃┃Text1                     ┃┃┍━━━━━━━━┑                ┃┃│img URL2│                ┃┃┕━━━━━━━━┙                ┃┃Text2                     ┃┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃   ┍━━━━━━━━━┑     ┍━━━━━━━━┑        ┣━1┃   │img URL1 │     │img URL2│        ┣━2┃   ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2   ┣━3┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛1        2        3        4        5

<style>.outer2 {width: 100%;text-align: center;}
.outer2 > div, .outer2 > div > img {display: inline-block;}</style>

因此，上面的CSS可以像下面一样应用于“outer2”包装器内的中心项目（水平）：

<div class="outer2"><div>Line1: <img src="URL-1"> Text1 <img src="URL-2"></div></div>...<div class="outer2"><div>Line2: <img src="URL-3"> Text2 <img src="URL-4"></div></div>

应用CSS和使用上述超文本标记语言后，网页中的这些行如下所示：

BEFORE applying code:┏━━━━━━━━━━━━━━━━━━━━━━┓┃Line1:                ┃┃┍━━━━━━━━┑            ┃┃│img URL1│            ┃┃┕━━━━━━━━┙            ┃┃Text1                 ┃┃┍━━━━━━━━┑            ┃┃│img URL2│            ┃┃┕━━━━━━━━┙            ┃┗━━━━━━━━━━━━━━━━━━━━━━┛........................┏━━━━━━━━━━━━━━━━━━━━━━┓┃Line2:                ┃┃┍━━━━━━━━┑            ┃┃│img URL3│            ┃┃┕━━━━━━━━┙            ┃┃Text2                 ┃┃┍━━━━━━━━┑            ┃┃│img URL4│            ┃┃┕━━━━━━━━┙            ┃┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1┃         │img URL1│     │img URL2│   ┣━2┃   Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙   ┣━3┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛1        2        3        4        5.......................................┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1┃         │img URL3│     │img URL4│   ┣━2┃   Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙   ┣━3┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛1        2        3        4        5

<style>.outer2 {width: 100%;text-align: center;vertical-align: middle;}
.outer2 > div, .outer2 > div > img {display: inline-block;vertical-align: middle;}</style>

因此，上面的CSS可以像下面一样应用，以水平居中项目并在“outer2”包装器的中间垂直对齐：

<div class="outer2"><div>Line1: <img src="URL-1"> Text1 <img src="URL-2"></div></div>...<div class="outer2"><div>Line2: <img src="URL-3"> Text2 <img src="URL-4"></div></div>

应用CSS和使用上述超文本标记语言后，网页中的这些行如下所示：

BEFORE applying code:┏━━━━━━━━━━━━━━━━━━━━━━┓┃Line1:                ┃┃┍━━━━━━━━┑            ┃┃│img URL1│            ┃┃┕━━━━━━━━┙            ┃┃Text1                 ┃┃┍━━━━━━━━┑            ┃┃│img URL2│            ┃┃┕━━━━━━━━┙            ┃┗━━━━━━━━━━━━━━━━━━━━━━┛........................┏━━━━━━━━━━━━━━━━━━━━━━┓┃Line2:                ┃┃┍━━━━━━━━┑            ┃┃│img URL3│            ┃┃┕━━━━━━━━┙            ┃┃Text2                 ┃┃┍━━━━━━━━┑            ┃┃│img URL4│            ┃┃┕━━━━━━━━┙            ┃┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1┃   Line1:│img URL1│Text1│img URL2│   ┣━2┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛1        2        3        4        5.......................................┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃         ┍━━━━━━━━┑     ┍━━━━━━━━┑   ┣━1┃   Line2:│img URL3│Text2│img URL4│   ┣━2┃         ┕━━━━━━━━┙     ┕━━━━━━━━┙   ┣━3┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛1        2        3        4        5

#outer {postion: relative}#inner {width: 100px;height: 40px;position: absolute;top: 50%;margin-top: -20px; /* Half of your height */}

根据您的情况，最简单的解决方案可能是：

margin: 0 auto; float: none;

是的，这是简短而干净的水平对齐代码。

.classname {display: box;margin: 0 auto;width: 500px /* Width set as per your requirement. */;}

最好的方法是使用表单元格显示（内部），它正好在显示表（外部）的div之后，并为内部div设置垂直对齐（使用表单元格显示），并且您在内部div中使用的每个标签都放置在div或页面的中心。

注意：您必须将指定的高度设置为外部

这是你知道的最好的方法，没有相对或绝对的位置，你可以在每个浏览器中使用它。

#outer{display: table;height: 100vh;width: 100%;}

#inner{display: table-cell;vertical-align: middle;text-align: center;}

<div id="outer"><div id="inner"><h1>set content center</h1><div>hi this is the best way to align your items center</div></div></div>

只能水平居中

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

容器：

• 应该有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 class="container"><div class="centered-content">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 class="outer-container"><div class="inner-container"><div class="centered-content">Center this!</div></div></div>

请参阅这个小提琴！

就是这么简单。

只需决定要为内部div提供的宽度并使用以下CSS。

css

.inner{width: 500px; /* Assumed width */margin: 0 auto;}

看完所有的答案后，我没有看到我更喜欢的那个。这就是你如何将一个元素放在另一个元素的中心。

jsfiddle-http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p><div class="outterDiv"><div class="innerDiv horzCenter"></div></div><p>Vert Center</p><div class="outterDiv"><div class="innerDiv vertCenter"></div></div><p>True Center</p><div class="outterDiv"><div class="innerDiv trueCenter"></div></div>.vertCenter{position: absolute;top:50%;-ms-transform: translateY(-50%);-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.horzCenter{position: absolute;left: 50%;-ms-transform: translateX(-50%);-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.trueCenter{position: absolute;left: 50%;top: 50%;-ms-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.outterDiv{position: relative;background-color: blue;width: 10rem;height: 10rem;margin: 2rem;}.innerDiv{background-color: red;width: 5rem;height: 5rem;}

超文本标记语言：

<div id="outer"><div id="inner"></div></div>

css：

#outer{width: 500px;background-color: #000;height: 500px}#inner{background-color: #333;margin: 0 auto;width: 50%;height: 250px;}

小提琴

添加#0到父div

#outer {text-align: center;}

或

#outer > div {margin: auto;width: 100px;}

这个方法也很好用：

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

对于内部<div>，唯一的条件是它的height和width不能大于它的容器。

您可以使用CSS Flexbox实现这一点。您只需要将3个属性应用于父元素以使一切正常。

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

看看下面的代码，这将使您更好地理解属性。

了解更多关于CSS Flexbox

#outer {display: flex;align-items: center;justify-content: center;border: 1px solid #ddd;width: 100%;height: 200px;}

<div id="outer"><div id="inner">Foo foo</div></div>

给内部div添加一些width，并在CSS属性中添加margin:0 auto;。

.outer {text-align: center;width: 100%}

您可以使用CSS Flexbox。

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

您可以在此链接上了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

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

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

<div id="outer" style="width:100%"><div id="inner">Foo foo</div></div>

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

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

<div id="outer" style="width:100%"><div id="inner">Foo foo</div></div>

将CSS添加到您的内部div。设置margin: 0 auto并将其宽度设置为小于100%，即外部div的宽度。

<div id="outer" style="width:100%"><div id="inner" style="margin:0 auto;width:50%">Foo foo</div></div>

这将产生预期的结果。

css

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

超文本标记语言

<div id="outer" style="width:100%"><div id="inner">Foo foo</div></div>

<div id="outer" style="width:100%"><div id="inner" style="text-align:center">Foo foo</div></div>

最简单的答案：将边缘：自动；添加到内部。

<div class="outer"><div class="inner">Foo foo</div></div>

css代码

.outer{width: 100%;height: 300px;background: yellow;}
.inner{width: 30%;height: 200px;margin: auto;background: red;text-align: center}

查看我的代码笔链接：http://codepen.io/feizel/pen/QdJJrK

简单地Margin:0px auto：

#inner{display: block;margin: 0px auto;width: 100px;}

<div id="outer" style="width:100%"><div id="inner">Foo foo</div></div>

CSS 3:

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

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

关于 justify-content的不同值的一个很好的 演示。

收听: 浏览器-兼容性

试试看:

#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 id="containerdiv">
<div>88</div>
<div>77</div>
<div>55</div>
<div>33</div>
<div>40</div>
<div>45</div>
</div>
</body>
</html>

Flex 有超过97% 的浏览器支持覆盖率，可能是在几行内解决这些问题的最佳方法:

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

它也可以水平和垂直居中使用绝对定位，像这样:

#outer{
position: relative;
}


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

使用下面的代码。

超文本标示语言

<div id="outer">
<div id="inner">Foo foo</div>
</div>

CSS

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

最广为人知的方法是使用 margin如下:

#parent {
width: 100%;
background-color: #CCCCCC;
}


#child {
width: 30%; /* We need the width */
margin: 0 auto; /* This does the magic */
color: #FFFFFF;
background-color: #000000;
padding: 10px;
text-align: center;
}

<div id="parent">
<div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

运行代码以查看它是如何工作的。此外，当您尝试以这种方式居中时，有两件重要的事情您不应该在 CSS 中忘记: margin: 0 auto;。这就是我们想要的 Div 中心。另外不要忘记 width的孩子，否则它不会得到预期的中心！

您可以使用一行代码，只需 text-align:center。

这里有一个例子:

#inner {
text-align: center;
}

<div id="outer" style="width:100%">
<div id="inner"><button>hello</button></div>
</div>

Flexbox

display: flex 表现得像一个块元素，并根据 Flexbox 模型布局其内容，它与 justify-content: center 一起工作。

#inner {
display: inline-block;
}


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

<div id="outer">
<div id="inner">Foo foo</div>
</div>

#inner {
display: inline-block;
}


#outer {
text-align: center;
}

<div id="outer">
<div id="inner">Foo foo</div>
</div>

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

<div id="outer">
<div id="inner">Foo foo</div>
</div>

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

<div id="outer">
<div id="inner">Foo foo</div>
</div>

#inner {
display: inline-block;
}

<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>