有了它，可以很容易地将 div 水平和垂直居中。flexbox

#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

其他解决方案

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

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

当然，您不必将 设置为 .任何小于包含的宽度都可以工作。这是实际的居中。width50%<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>

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

将 和 设置为 和 。不过，这仅适用于水平。如果你想要两种方式，你就双向做。不要害怕尝试;这并不是说你会破坏任何东西。widthmargin-leftmargin-rightauto

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

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

#inner {
  display: inline-block;
}

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

这使得内部元素成为可以以 为中心。divtext-align

我最近不得不将一个“隐藏”的 div（即 ）居中，其中包含一个需要在页面上居中的表格。我编写了以下jQuery代码来显示隐藏的div，然后将CSS内容更新为自动生成的表格宽度，并更改边距以使其居中。（显示切换是通过单击链接触发的，但此代码不是显示所必需的。display:none;

注意：我之所以分享这段代码，是因为 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-align 属性

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

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

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

您可以使用：

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

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

对于 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>

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

最好的方法是使用 CSS3。

旧盒子模型（已弃用）

display: box其属性 、 、 等已被 flexbox 替换。虽然它们可能仍然有效，但不建议在生产中使用它们。box-packbox-alignbox-orientbox-direction

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

阅读有关居中子元素的详细信息

• CSS Box 模型模块第 3 级

• 盒子模型 （CSS2）

• MDN 上的 box-align

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

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

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

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

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

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

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

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

因此，为了完整起见，这里是使用 Flexible Box Layout Module 在 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 id="outer">
  <div id="inner">Foo foo</div>
</div>

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

我已将内联样式应用于内部 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;
}


/* and */

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

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

即使您调整屏幕大小，它也会保留在其中。center

将以下 CSS 内容用于 div：#inner

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

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

你可以做这样的事情

#container {
    display: table;
    height: /* height of your container */;
    width: /* width of your container */;
}

#inner {
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: /* width of your center div */;
}

这也将使垂直对齐。如果不想，请删除 和 属性;#innerdisplayvertical-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, can
       also be of any width and height */

#inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

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

我最近发现的一件好事，混合使用 + 和左边的技巧，您可以使用纯 CSS 在水平和垂直上将动态大小的框放在另一个动态大小的框中。line-heightvertical-align50%center

请注意，您必须使用 spans （and ），在现代浏览器 + Internet Explorer 8 中测试。HTML格式：inline-block

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

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

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 内容必须像这个 fiddle 上的示例一样。

HTML 内容如下所示：

<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. 制作一个内联块;它的大小与使其宽度为 300 像素相同。.center-helper.inner
3. 相对于其父级向右推 50%;这会将其左侧置于 500 像素 WRT。外。.center-helper
4. 相对于其父项向左推 50%;这会将其左侧置于 -150 像素 WRT。中心助手，这意味着它的左边是 500 - 150 = 350 像素。外。.inner
5. 将 overflow 设置为 hidden 以防止水平滚动条。.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);
  })
});

如果要在响应式方法中使用它，请替换上一示例中的 by。$(document).ready$(window).resize

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

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>

在 Codepen 或 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>

如果有人想要一个jQuery解决方案，请对齐这些divs：

$(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 一个宽度：

例如：

[HTML全文]

<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 保留在视图中和内容顶部。只需放入 HTML 中即可享受。body

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

#outer {
  position: relative;
}

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

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

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

下面是一个显示水平和垂直对齐的小提琴。

更多信息请见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>

通过下面的 HTML 代码应用上面的 CSS，水平居中和垂直居中（又名：中间垂直对齐）：

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

在应用CSS并使用上述HTML之后，网页中的该部分将如下所示：

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>

通过下面的 HTML 代码将上面的 CSS 应用到居中（水平）：

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

应用CSS并使用上述HTML后，网页中的那一行将如下所示：

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并使用上述HTML后，网页中的那一行将如下所示：

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并使用上述HTML之后，网页中的这些行将如下所示：

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并使用上述HTML之后，网页中的这些行将如下所示：

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 {
   position: 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>

也看这个小提琴！

只需决定要为内部提供什么宽度，并使用以下 CSS：<div>

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

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

在阅读了所有答案后，我没有看到我喜欢的答案。这就是将一个元素居中到另一个元素的方法。

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

#outer {
   width: 500px;
   background-color: #000;
   height: 500px;
}

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

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

JSFiddle

添加到父级 ：text-align:center;<div>

#outer {
   text-align: center;
}

JSFiddle

或

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

JSFiddle

这种方法也很好用：

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

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

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

您可以使用 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>

给内部一些，并添加 CSS 属性。widthdivmargin:0 auto;

您可以使用 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:flexmargin:auto;

#outer {
  display: flex;
}

#inner {
  margin: auto;
}

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

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

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

[HTML全文]

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

最简单的答案：将 margin：auto; 添加到 inner。

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

检查我的 CodePen 链接： 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

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

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

它也可以使用绝对定位在水平和垂直方向上居中，如下所示：

#outer{
    position: relative;
}

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

使用以下代码。

#outer {
   text-align: center;
}

#inner {
   display: inline-block;
}

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

在许多浏览器（包括旧浏览器）中广泛使用并工作的最著名的方式如下：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中不应该忘记两件重要的事情：.这使它成为想要的 div 中心。另外别忘了孩子，否则它不会像预期的那样居中！margin: 0 auto;width

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

下面是一个示例：

#inner {
   text-align: center;
}

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

弹性盒

显示：Flex 的行为类似于块元素，并根据 FlexBox 模型对其内容进行布局。它适用于 justify-content： center。

请注意：Flexbox 兼容除 Internet Explorer 之外的所有浏览器。请参阅 display： flex not working on Internet Explorer，了解浏览器兼容性的完整和最新列表。

#inner {
  display: inline-block;
}

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

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

文本对齐：居中

应用文本对齐：居中 内联内容在行框内居中。但是，由于内部 div 默认具有，因此您必须设置特定的宽度或使用以下方法之一：width: 100%

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

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

保证金：0自动

使用 margin： 0 auto 是另一种选择，它更适合较旧的浏览器兼容性。它与 display： table 一起工作。

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

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

变换

transform： translate 允许您修改 CSS 视觉格式模型的坐标空间。使用它，可以平移、旋转、缩放和倾斜元素。要水平居中，它需要位置：绝对和左侧：50%。

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

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

<center>（已弃用）

标记 <center> 是 text-align： center 的 HTML 替代项。它适用于较旧的浏览器和大多数新浏览器，但它不被认为是一个好的做法，因为此功能已经过时并且已从 Web 标准中删除。

#inner {
  display: inline-block;
}

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

对不起，这个 1990 年代的婴儿刚刚为我工作：

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

我会为这个罪下地狱吗？

您可以使用此链接。

.outer {
   display: table;
   width: 100%;
   height: 100%;
}
.inner {
   vertical-align: middle;
}

您可以添加以下代码：

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

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

在 div 中居中 div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

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

我们可以使用下一个 CSS 类，它允许将任何元素垂直和水平居中：

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

用：

<div id="parent">
  <div class="child"></div>
</div>

风格：

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

如果要将其水平居中，则应按如下方式编写：

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

您可以使用 calc 方法。用法适用于您居中的 div。如果您知道它的宽度，假设它是 1200 像素，请选择：

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

因此，基本上它将添加 50% 减去已知宽度一半的左边距。

使用以下代码：

#inner {
   width: 50%;
   margin: 0 auto;
   text-align: center;
}

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

用：

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

你可以用不同的方式做到这一点。请参阅以下示例。

1. 第一种方法

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

#inner {
   display: inline-block;
}

2. 第二种方法

#outer {
   position: relative;
   overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

这是使用 Flexbox 水平居中的另一种方法，无需指定内部容器的任何宽度。这个想法是使用伪元素，从右边和左边推动内部内容。

使用 on 伪元素将使它们填充剩余的空间并采用相等的大小，并且内部容器将居中。flex:1

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

我们还可以通过简单地将弯曲方向更改为柱子来考虑垂直对齐的相同情况：

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

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

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

将 div 居中的主要属性是和根据要求：margin: autowidth:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

这会在水平和垂直方向上集中您的内部 div：

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

对于仅水平对齐，更改

margin: 0 auto;

对于垂直方向，改变

margin: auto 0;

您可以用于外部 div 和水平居中，您必须添加display: flexjustify-content: center

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

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

试试这个：

.outer {
   text-align: center;
}
.inner {
   width: 500px;
   margin: 0 auto;
   background: brown;
   color: red;
}

<div class="outer">
    <div class="inner">This DIV is centered</div>
</div>

我在各种项目中使用的最好的是

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

小提琴链接

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}

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

这肯定会使您的水平和垂直居中。这也与所有浏览器兼容。我只是添加了额外的样式，只是为了显示它是如何居中的。#inner

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

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

但是，当然，如果您只想让它水平对齐，这可能会对您有所帮助。

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

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

最简单的方法之一是使用 .外部 div 只需要具有显示弹性，而内部 div 需要使其水平居中。display: flexmargin: 0 auto

要垂直居中并将一个 div 在另一个 div 中居中，请查看下面 .inner 类的注释

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}

<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

您可以使用 Flexbox 来做到这一点，这在当今是一种很好的技术。

要使用 Flexbox，您应该给 和 父元素或 div 元素。代码应如下所示：display: flex;align-items: center;#outer

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

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

这应该使您的孩子或 div 水平居中。但你实际上看不到任何变化。因为我们的 div 没有高度，换句话说，它的高度被设置为 auto，所以它与它的所有子元素具有相同的高度。因此，经过一些视觉样式处理后，结果代码应如下所示：#inner#outer

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

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

你可以看到 div 现在居中了。Flexbox 是使用 CSS 在水平或垂直堆栈中定位元素的新方法，它具有 96% 的全球浏览器兼容性。因此，您可以自由使用它，如果您想了解有关 Flexbox 的更多信息，请访问 CSS-Tricks 文章。在我看来，这是学习使用 Flexbox 的最佳场所。#inner

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

如果您以静态方式使用 div，则正常情况。

如果希望 div 在 div 绝对到其父级时居中，以下示例如下：

.parentdiv{
    position: relative;
    height: 500px;
}

.child_div{
   position: absolute;
   height: 200px;
   width: 500px;
   left: 0;
   right: 0;
   margin: 0 auto;
}

这对我有用：

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

在此代码中，您将确定元素的宽度。

我更新的首选解决方案是这样的：

#inner {
  width: 100%;
  max-width: 65px; /*width of the content*/
  margin: 0 auto;/*this will make put the div in the center*/
  text-align: center;/*this will center the text inside the div*/
}

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

使用 flexbox：

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

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

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

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

.outer
{
  background-color: rgb(230,230,255);
  width: 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}

<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>

让它变得简单！

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

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

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

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

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

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

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

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

使用自动前缀器：

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

对于水平居中：<div>

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

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

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

我们可以使用 Flexbox 来非常轻松地实现这一点：

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

将 div 在 div 内水平居中：

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

将 div 垂直置于 div 内部的中心：

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

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

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

您可以添加另一个具有相同大小的 #inner 的 div，并将其向左移动 -50%（#inner 宽度的一半）并 #inner 50%。

#inner {
    position: absolute;
    left: 50%;
}

#inner > div {
    position: relative;
    left: -50%;
}

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

最简单的方法之一......

<!DOCTYPE html>
<html>
    <head>
        <style>
            #outer-div {
                width: 100%;
                text-align: center;
                background-color: #000
            }
            #inner-div {
                display: inline-block;
                margin: 0 auto;
                padding: 3px;
                background-color: #888
            }
        </style>
    </head>

    <body>
       <div id ="outer-div" width="100%">
           <div id ="inner-div"> I am a easy horizontally centered div.</div>
       <div>
    </body>
</html>

这是将 <div 水平居中的最佳示例>

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

<!DOCTYPE html>
<html>
    <head>

    </head>

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

如果你有一个高度的父级，或者像下面这样有高度为200px的父级div#outer，那么添加CSS内容，如下所示body{height: 200px}

HTML格式：

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

CSS：

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

然后子内容，比如 div#centered content，将垂直或水平居中，而不使用任何位置 CSS。要删除垂直中间行为，只需修改为下面的 CSS 代码：

#centered {
  margin: 0px auto;
}

或

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

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

演示：https://jsfiddle.net/jinny/p3x5jb81/5/

要仅添加边框以显示默认情况下内部 div 不是 100%：

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}

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

演示：http://jsfiddle.net/jinny/p3x5jb81/9

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

在 CSS 中水平对齐到中心：

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

在 CSS 中垂直 + 水平对齐到中心：

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

使用 Sass（SCSS 语法），您可以使用 mixin 来做到这一点：

使用翻译

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在 HTML 标记中：

<div class="center-horizontally">
    I'm centered!
</div>

请记住添加到父 HTML 元素。position: relative;

使用 Flexbox

使用 flex，您可以执行以下操作：

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在 HTML 标记中：

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>

试试这个 CodePen！

我使用了 Flexbox 或 CSS 网格

1. 弹性盒

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

2. CSS 网格

   #outer {
       display: inline-grid;
       grid-template-rows: 100px 100px 100px;
       grid-template-columns: 100px 100px 100px;
       grid-gap: 3px;
   }

您可以通过多种方式解决问题。

在前面的例子中，他们使用了 ，而其他答案则使用了“with transform and translate”。margin: 0 autodisplay:table

那么仅仅使用标签呢？每个人都知道HTML5不支持一个标签。但它适用于 HTML5。例如，在我的旧项目中。<center>

它正在工作，但现在不仅是 MDN Web Docs，其他网站也建议不要再使用它了。在Can I use中，你可以看到MDN Web Docs的笔记。但无论如何，有这样一种方式。这只是要知道。总是被注意到某事是如此有用。

要在中间的 div 中对齐 div -

.outer{
  width: 300px; /* For example */
  height: 300px; /* For example */
  background: red;
}
.inner{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: yellow;
}

<body>
  <div class='outer'>
    <div class='inner'></div>
  </div>
</body>

这将使内部 div 在垂直和水平方向上对齐中间。

带网格

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

div {
    border: 1px dotted grey;
}

#outer {
    display: grid;
    place-items: center;
    height: 50px; /* not necessary */
}

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id="outer">
            <div>Foo foo</div>
        </div>
    </body>
</html>

CSS justify-content 属性

它将 Flexbox 项对齐在容器的中心：

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

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

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

试试这个：

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Example</div></div>

就我而言，我需要将一个下拉菜单（在屏幕上）居中（在屏幕上）用于其项目），该按钮可以垂直放置多个位置。在我将位置从绝对位置更改为固定位置之前，这些建议都没有奏效，如下所示：

#outer {
      margin: auto;
      left: 0;
      right: 0;
      position: fixed;
}
#inner {
      text-align: center;
}

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

上述代码使下拉列表始终在各种尺寸的设备上居中，无论下拉按钮垂直位于何处。

Flexbox 水平居中和垂直居中对齐元素

.wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex; justify-content: center; align-items: center; height: 300px;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}

<h1>Flexbox Center Horizontally and Vertically Center Align an Element</h1>
<h2>justify-content: center; align-items: center;</h2>

<div class="wrapper">

<div class="parentClass">
  <div>c</div>
</div>

</div>

居中元素，无需具有动态高度和宽度的包装器/父元素

无副作用：在居中元素内使用 Flexbox 中的边距时，它不会将居中元素的宽度限制为小于视口宽度

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

水平 + 垂直居中，如果其高度与宽度相同：

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

要使元素水平居中，可以使用以下方法：

方法 1：使用 margin 属性

如果元素是块级元素，则可以使用 margin 属性将元素居中。设置 和 is to auto （简写 - ）。margin-leftmargin-rightmargin: 0 auto

这将使元素水平对齐中心。 如果该元素不是块级元素，则向其添加属性。display: block

#outer {
  background-color: silver;
}
#inner {
  width: max-content;
  margin: 0 auto;
  background-color: #f07878;
}

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

方法二：使用CSS flexbox

创建一个 flexbox 容器和 use 属性，并将其设置为 .这将使所有元素水平对齐到网页的中心。justify-contentcenter

#outer {
  display: flex;
  justify-content: center;
  background-color: silver;
}
#inner {
  background-color: #f07878;
}

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

方法3：使用位置绝对技术

这是将元素居中的经典方法。设置为外部元素。将内部元素的位置设置为 absolute 和 。这将推动内部元素从外部元素的中心开始。现在使用 transform 属性并设置这将使元素水平居中。postion:relativeleft: 50%transform: translateX(-50%)

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

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

尝试以下示例，但容器应具有宽度，例如 .100%

button {
   margin: 0 auto;
   width: fit-content;
   display: block;
}

只需这样做：

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

CSS的

#outer{
  display: grid;
  place-items: center;
}

我看过很多很多答案，但它们都已经过时了。谷歌已经为这个常见问题实施了一个解决方案，无论发生什么，它都会将对象居中，是的，它是响应式的。因此，永远不要再这样做或手动操作。transform()position

.HTML

...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

.CSS的

.parent {
   display: grid;
   place-items: center;
}

这可以通过使用多种方法来完成。许多男生/女生给出的答案是正确的并且工作正常。我再举一个不同的模式。

在 HTML 文件中

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

在 CSS 文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

#outer {
   display: grid;
   place-items: center;
}

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

有几种方法可以实现它：使用“flex”、“positioning”、“margin”等。假设和问题中给出的 div：#outer#inner

我建议使用“flex”

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

使用定位进行水平对齐

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

使用定位进行水平和垂直对齐

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

使用边距水平对齐

#inner {
 width: fit-content;
 margin: 0 auto;
}

我只是建议在容器显示为 flex 时使用。 当它是关于文本元素时。justify-content: center;text-align: center;

检查下面的代码并根据要求进行修改。

#content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

#container {
  border: 1px solid red;
  width:100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

<div id="container">
  <div id="content_block">Foo foo check</div>
</div>

如何使用 CSS 在另一个中水平居中？<div><div>

以下是居中方法的非详尽列表，使用：

• margin和auto
• margin和calc()
• padding以及box-sizingcalc()
• position: absolute和负 margin-left
• position: absolute和负 transform: translateX()
• display: inline-block和text-align: center
• display: table和display: table-cell
• display: flex和justify-content: center
• display: grid和justify-items: center

1. 将块级元素居中用于水平边距auto

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 auto;
  background-color: rgb(255, 255, 0);
}

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

2. 使用水平边距将块级元素居中calc

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 255, 0);
}

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

3. 使用水平填充 + 将块级元素居中calcbox-sizing

.outer {
  width: 300px;
  height: 180px;
  padding: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

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

4. 使用 with 和 negative 将块级元素居中position: absoluteleft: 50% margin-left

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  margin-left: -75px;
  background-color: rgb(255, 255, 0);
}

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

5. 使用 with 和负值居中块级元素position: absoluteleft: 50% transform: translateX()

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
  transform: translateX(-75px);
}

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

6. 使用 和 将元素居中display: inline-blocktext-align: center

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  text-align: center;
  background-color: rgb(255, 0, 0);
}

.inner {
  display: inline-block;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

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

7. 使用 和 使元素居中display: tablepaddingbox-sizing

.outer {
  display: table;
  width: 300px;
  height: 180px;
  padding: 0 75px;
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  background-color: rgb(255, 255, 0);
}

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

8. 使用 和 使元素居中display: flexjustify-content: center

.outer {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  flex: 0 0 150px;
  background-color: rgb(255, 255, 0);
}

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

9. 使用 和 使元素居中display: gridjustify-items: center

.outer {
  display: grid;
  justify-items: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  background-color: rgb(255, 255, 0);
}

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

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

* {
   margin: 0;
   padding: 0;
}

#outer {
   background: red;
   width: 100%;
   height: 100vh;
   display: flex;
   /*center For  vertically*/
   justify-content: center;
   flex-direction: column;
   /*center for horizontally*/
   align-items: center;
}

#inner {
   width: 80%;
   height: 40px;
   background: grey;
   margin-top: 5px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>horizontally center an element</title>
    </head>

    <body>
        <div id="outer">
            <div id="inner">1</div>
            <div id="inner" style="background: green;">2</div>
            <div id="inner" style="background: yellow;">3</div>
        </div>
    </body>
</html>

.res-banner {
    width: 309px;
    margin: auto;
    height: 309px;
}

<div class="container">
    <div class="res-banner">
        <img class="imgmelk" src="~/File/opt_img.jpg" />
    </div>
</div>

2022年回顾

这是一个非常古老的问题，所以我今天只是想报告一下情况：

• CSS 网格和 flexbox 是居中、水平或垂直的最佳选择;
• margin：auto 方法如果内部内容不是框，效果很好（内联块也可以）;
• 边距 50% 使用 transform：translateX（-50%） 是蛮力，但工作正常;
• 绝对位置和 translateX/Y 也适用于水平和垂直居中，许多对话框使用它，将高度拉伸到 100vh;
• 带有内联块的旧 text-align：center 仍然有效
• 被称为“中心标签”的古代恶魔仍然有效，实际上这是水平居中的最简单方法。被许多人贬低、恐惧和憎恨，但仍然如此;
• 桌子（实际上是TD标签）可以漂亮地居中，水平和垂直，但它们也被称为旧帽子;
• 如果您不幸使用一个模板，最后 2 个也可以在电子邮件模板中使用（它们是 HTML4）。

这就是 2022 年的样子，我希望我们只需要网格和弹性盒子。这些人是我们在1999年所有祈祷的答案。

您可以在 CSS 中使用 Property 将 a 水平居中。<div><div>text-align

text-align: center用于将外部 div 的文本水平居中。

text-align: right用于将文本向右对齐。

text-align: left用于将文本向左对齐。

text-align: justify用于拉伸线条，使每条线的宽度相等。

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
} 

<h1>The text-align Property</h1>

<div class="a">
<h2>text-align: center:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="b">
<h2>text-align: left:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="c">
<h2>text-align: right:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="d">
<h2>text-align: justify:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

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

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

您可以使用以下方法水平对齐任何元素：

<div align=center>
    (code goes here)
</div>

艺术

<!-- css here -->
    .center-me {
        margin: 0 auto;
    }

<!-- html here -->
    <div class="center-me">
        (code goes here)
    </div>

我认为这将是一个解决方案：

#outer {
    position: absolute;
    left: 50%;
}

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

两个元素的宽度必须相同才能单独运行。

为方便起见，您可以使用标签。<center>

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

注意：<center> 已弃用，不应再使用。

更新了 2022 年水平居中元素

1. 使用 flexbox 水平居中

要水平居中，像 （div） 这样的元素需要将 和 添加到元素 css 类中。display:flexjustify-content:center

<div class="center">
   <h1>I'm Horizontally center</h1>
</div>

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

2. 使用边距水平居中

下面的示例显示了如何使用 和 水平居中元素。marginswidth

.center{
    width:50%;
    margin:0 auto;
}

在上面的代码中，添加了 and，以便元素在 和 边距之间平均分配可用空间。width:50%margin:0 autoleftright

3. 使用变换进行水平居中

下面的示例显示了如何使用 和 属性将元素水平居中。positiontransform

.center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

• 首先添加 ，以便该元素从正常的文档流中出来。position:absolute
• 其次，我们添加了 ，以便元素向 x 轴移动。left:50%50%
• 第三，我们添加了 ，使该元素向后移动 50% 并将其与中心对齐。transform:translateX(-50%)

可以使用 CSS Flexbox 属性使元素水平居中。

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

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

如果要使元素水平居中，可以这样做：

1.方法一：使用flexbox。

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

如果您也想垂直居中对齐，只需添加 align-items： center;。为此，您需要为 #outer 提供一定的高度。

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

2.方法二：使用保证金。 要使此方法起作用，您需要为 #inner 提供一定的宽度。

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

3.方法三：使用（边距+翻译）。为此，您需要为 #inner 提供一定的宽度。

#inner {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
}