4787

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

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

125 回答 125

5252

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

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

当然，您不必将 to 设置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: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

于 2008-09-22T12:29:07.710 回答
1351

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

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

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

于 2011-01-20T22:55:26.767 回答
426

最好的方法是使用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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

弹性：

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

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

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

于 2012-08-30T12:05:25.450 回答
281 

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

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

于 2011-12-01T19:52:29.317 回答
261

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

代码基本上是这样的：

#outer {
 position: relative;
}

和...

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

center即使您调整屏幕大小，它也会保持不变。

于 2013-09-11T11:32:31.527 回答
245

一些张贴者提到了使用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>

如果您需要支持使用旧语法的旧浏览器，那么这里是一个不错的选择。

于 2013-04-22T10:32:07.340 回答
161

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

您可以使用：

#element {
    display: table;
    margin: 0 auto;
}
于 2012-05-12T23:45:31.703 回答
136

将未知高度和宽度的 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上进一步修改它。

于 2014-05-17T18:38:48.260 回答
113

设置和width设置margin-left和margin-right。auto不过，这仅适用于水平。如果你想要两种方式，你就两种方式都做。不要害怕尝试；这不像你会破坏任何东西。

于 2009-07-24T22:00:04.437 回答
108

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

于 2008-09-22T12:30:08.253 回答
102

CSS 3 的 box-align 属性

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
于 2012-03-11T13:37:51.707 回答
78

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

注意：我正在分享这段代码，因为谷歌把我带到了这个 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>

于 2011-06-23T21:42:53.133 回答
78

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

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

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

于 2013-04-07T08:22:07.357 回答
69

对于 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 Mode 中对于旧版浏览器支持是必需的。

于 2012-05-31T15:32:44.763 回答
65

采用：

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

于 2013-07-19T10:21:28.800 回答
61

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

更多信息请参见 Mozilla 开发者网络。

于 2015-03-12T14:01:38.540 回答
56

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;
}
于 2013-10-25T11:53:59.677 回答
52

我最近找到了一种方法：

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

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

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

于 2013-05-27T16:12:43.473 回答
45

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

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>

然后在 fiddle 上查看这个示例。

于 2013-12-04T07:30:31.860 回答
40

仅水平居中

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

容器：

  • 应该有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>

另见这个小提琴！

于 2016-02-19T16:57:54.530 回答
38

弹性盒

display: 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>

文本对齐：居中

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

#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 视觉格式化模型的坐标空间。使用它，可以平移、旋转、缩放和倾斜元素。要水平居中，它需要position: absolute和left: 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. 它适用于旧浏览器和大多数新浏览器，但由于此功能已过时并且已从 Web 标准中删除，因此不被认为是一种好的做法。

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

于 2017-06-09T08:34:30.470 回答
36

此方法也可以正常工作：

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

对于 inner <div>，唯一的条件是它的heightandwidth不能大于它的容器。

于 2016-09-23T06:49:46.857 回答
35

最简单的方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

于 2014-08-22T12:10:48.360 回答
33

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

  • .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 像素 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;
}
<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>

于 2014-01-17T18:18:26.417 回答
32

Flex 拥有超过 97% 的浏览器支持覆盖率，并且可能是在几行内解决此类问题的最佳方法：

#outer {
  display: flex;
  justify-content: center;
}
于 2017-04-03T20:12:59.610 回答
30

你可以做这样的事情

#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垂直对齐。如果您不想这样做，请删除displayandvertical-align属性；

于 2013-10-14T12:09:57.280 回答
28

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

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 % );
}
于 2014-01-28T09:55:54.967 回答
26

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

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

或者您可以访问w3schools - CSS flex 属性以获得更多想法。

于 2018-06-10T15:53:54.750 回答
24

好吧，我设法找到了一个可能适合所有情况的解决方案，但使用 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);
  })
});
于 2014-02-11T15:51:03.233 回答
22

我发现存在一个选项：

每个人都说使用：

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 */
}
于 2013-11-16T19:56:08.663 回答
19

如果有人想要一个用于中心对齐这些 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;");
});
于 2014-09-20T07:22:04.833 回答
19

你可以像这样简单地使用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%)
}
于 2019-04-04T11:59:58.177 回答
18

尝试玩弄

margin: 0 auto;

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

text-align: center;
于 2013-11-05T15:21:21.100 回答
18

我们可以使用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;
}

在此处输入图像描述

于 2019-07-12T18:09:27.927 回答
17

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

在 CSS 中水平居中对齐：

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

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

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}
于 2020-01-06T06:44:18.760 回答
14

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

.parentBox {
    display: flex;
    justify-content: center
}
于 2019-02-12T02:47:31.730 回答
11

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

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
于 2013-06-06T05:30:29.967 回答
10

带网格

一个非常简单和现代的方法是使用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>

于 2020-07-27T21:10:48.597 回答
9

我最近发现的一件好事，混合使用line-height+vertical-align和50%左技巧，您可以center使用纯 CSS 在水平和垂直方向上将一个动态大小的框放入另一个动态大小的框内。

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

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

请参见此处的示例。

于 2013-10-31T19:56:49.160 回答
9

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>

于 2017-03-11T14:14:33.377 回答
8

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

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

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

于 2013-10-01T18:14:09.197 回答
8 
#inner {
    width: 50%;
    margin: 0 auto;
}
于 2015-05-15T10:26:00.363 回答
8

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

于 2016-11-01T13:41:38.627 回答
8

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

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

#outer {
  display: flex;
}

#inner {
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

于 2017-01-13T12:13:54.890 回答
7

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

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

  • margin和auto
  • margin和calc()
  • padding并且box-sizing和calc()
  • 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

auto1. 使用水平边距使块级元素居中

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

calc2. 使用水平边距使块级元素居中

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

calc3. 使用水平填充使块级元素居中+box-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>

position: absolute4. 使用withleft: 50%和negative将块级元素居中 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>

position: absolute5. 使用withleft: 50%和negative将块级元素居中 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-blockand将元素居中text-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: table,padding和box-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: flexand将元素居中justify-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: gridand将元素居中justify-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>

于 2022-01-03T18:14:35.370 回答
6

让它变得简单！

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

于 2019-03-26T15:27:12.380 回答
6

这是水平居中 <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>

于 2019-11-23T10:54:34.220 回答
5

最简单的方法之一...

<!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>
于 2019-07-30T12:44:48.990 回答
5

使元素居中而不需要具有动态高度和宽度的包装器/父级

无副作用：在居中元素内使用 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%));
于 2021-03-02T07:59:32.180 回答
4

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

<!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>
于 2014-09-19T21:26:23.647 回答
4

您可以使用CSS Flexbox。

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

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

于 2016-12-20T08:22:40.503 回答
4

最简单的答案：添加边距：自动；向内。

<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

在此处输入图像描述

于 2017-02-11T08:11:15.223 回答
4

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

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
于 2017-05-10T02:56:52.143 回答
4

在包括旧浏览器在内的许多浏览器中广泛使用并工作的最著名的方法是使用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孩子，否则它不会像预期的那样居中！

于 2017-05-20T10:30:09.157 回答
4

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

于 2017-09-23T16:58:15.977 回答
4

采用：

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

风格：

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

如果你想水平居中，你应该写如下：

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
于 2017-09-27T13:55:23.677 回答
4

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

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

所以基本上它会增加 50% 的左边距减去已知宽度的一半。

于 2017-10-06T10:50:05.317 回答
4

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

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

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

我们也可以通过简单地将 flex 的方向更改为 column 来考虑垂直对齐的相同情况：

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

于 2017-12-19T11:05:06.660 回答
4

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

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

小提琴链接

于 2018-08-07T10:01:52.337 回答
4

这肯定会#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>

于 2018-09-07T21:55:36.603 回答
4

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

display: flex;为了使用 Flexbox ，你应该给align-items: center;你的父元素或#outerdiv 元素。代码应该是这样的：

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

这应该使您的孩子或#innerdiv 水平居中。但你实际上看不到任何变化。因为我们的#outerdiv 没有高度，或者换句话说，它的高度设置为 auto，所以它的高度与其所有子元素的高度相同。所以经过一点视觉造型后，结果代码应该是这样的：

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

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

于 2018-09-10T23:06:24.317 回答
4 

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

于 2019-03-07T14:10:28.250 回答
4

如果您有某个身高的父母，body{height: 200px} 或者像下面这样有高度为 200px 的父母 div#outer，那么添加 CSS 内容如下

HTML：

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

CSS：

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

然后子内容，比如 div#centered 内容，将垂直或水平居中，而不使用任何位置 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

于 2019-12-10T09:07:51.023 回答
4

使用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>

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

使用弹性盒

使用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！

于 2020-02-07T15:12:40.783 回答
4

我使用了 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;
}

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

于 2020-02-19T13:12:16.207 回答
4

要在中间的 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。

于 2020-06-22T13:35:31.107 回答
4

只需这样做：

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

CSS

#outer{
  display: grid;
  place-items: center;
}
于 2021-04-12T06:21:17.537 回答
4

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

在HTML文件中

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

在CSS文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}
于 2021-05-04T18:11:04.033 回答
3

试试下面的 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

要在“外部”包装器中水平居中“内部”元素，“内部”元素（DIV、IMG 等类型）需要具有“内联”CSS 属性，例如：display:inline 或 display:inline-block等，然后“外部”CSS 属性 text-align:center 可以在“内部”元素上工作。

如此接近最少的 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

如果您想避免每次为每个“内部”元素指定 class="inner2" 属性，请尽早使用此类 CSS： 
<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

“id”属性的唯一名称/值只能用于一个网页中的一个 HTML 元素，因此同一“id”名称的 CSS 属性不能在多个 HTML 元素上重复使用，（某些网络浏览器错误地允许使用多个元素上的相同 ID）。
因此，当您在同一网页中需要多行时，需要在该行的中心（水平）显示内部元素/项目，那么您可以使用这样的 CSS“类”（又名：CSS 组、CSS 中继器）： 
<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

要在中间垂直对齐，我们需要使用下面的 CSS 代码： 
<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
于 2015-09-01T10:13:16.137 回答
3

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

这是一个例子：

#inner {
  text-align: center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

于 2017-06-02T22:38:22.637 回答
3

很抱歉，这个 1990 年代的婴儿对我有用：

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

我会因为这个罪而下地狱吗？

于 2017-07-22T06:42:20.803 回答
3 
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;
}
于 2018-11-14T09:25:59.420 回答
3

这对我有用：

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

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

于 2018-11-25T08:40:10.047 回答
3

您可以添加另一个与#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>

于 2019-07-18T18:06:45.247 回答
2 
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}
于 2015-11-14T12:08:48.273 回答
2

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

margin: 0 auto; float: none;
于 2015-12-20T21:45:58.430 回答
2

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

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
于 2015-12-23T09:39:26.890 回答
2

就是这么简单。

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

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}
于 2016-03-28T09:45:42.190 回答
2 

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

于 2016-05-08T04:50:41.463 回答
2

阅读完所有答案后，我没有看到我喜欢的答案。这就是您可以将一个元素居中于另一个元素的方式。

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;
}
于 2016-06-09T20:21:25.203 回答
2

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

于 2016-11-08T06:04:37.950 回答
2

CSS

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

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
于 2017-01-18T07:16:19.073 回答
2

使用下面的代码。

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
于 2017-05-17T09:07:03.950 回答
2

您可以添加以下代码：

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

于 2017-08-04T15:08:49.627 回答
2

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

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
于 2017-09-23T17:48:56.540 回答
2

使用此代码：

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
于 2017-10-14T07:09:12.610 回答
2

采用：

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
于 2017-10-18T09:51:37.220 回答
2

这使您的内部 div 水平和垂直集中：

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

仅水平对齐，更改

margin: 0 auto;

对于垂直，改变

margin: auto 0;
于 2018-03-15T18:18:19.143 回答
2

最简单的方法之一是使用display: flex. 外层 div 只需要显示 flex，内层需要margin: 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>

于 2018-09-07T21:56:14.400 回答
2

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

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

它正在工作，但现在不仅是MDN Web Docs，而且其他网站都建议不要再使用它。在Can I use你可以看到来自 MDN Web Docs 的注释。但无论如何，有这样的方法。这只是要知道。总是被注意到某事是如此有用。

在此处输入图像描述

于 2020-04-22T14:10:19.270 回答
2

试试这个：

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Foo foo</div></div>
于 2020-09-22T18:08:56.827 回答
2

在我的情况下，我需要在一个可以垂直具有不同位置的按钮下方居中（在屏幕上）一个下拉菜单（使用 flexbox 作为它的项目）。在我将位置从绝对位置更改为固定位置之前，这些建议都不起作用，如下所示：

  margin: auto;
  left: 0;
  right: 0;
  position: fixed;

上面的代码使下拉菜单始终位于所有尺寸设备的屏幕中心，无论下拉按钮垂直位于何处。

于 2020-11-03T23:46:52.677 回答
2

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

.HTML

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

.CSS

.parent {
   display: grid;
   place-items: center;
}
于 2021-04-16T21:55:15.443 回答
2

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

我建议使用“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;
}
于 2021-10-27T05:38:53.253 回答
1

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

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
于 2014-03-08T19:19:59.820 回答
1

试试这个：

<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;
}
于 2014-08-13T13:20:22.447 回答
1

首先：您需要为第二个 div 指定宽度：

例如：

HTML

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

CSS：

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

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

于 2014-09-27T08:29:03.617 回答
1

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

<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享受。

于 2015-01-15T14:31:34.443 回答
1

最好的方法是使用表格单元格显示（内部），它恰好位于带有显示表格（外部）的 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>

于 2016-02-12T08:15:29.567 回答
1

HTML：

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

小提琴。

于 2016-07-03T13:24:03.617 回答
1

添加text-align:center;到父 div 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

或者

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

https://jsfiddle.net/f8su1fLz/

于 2016-07-30T11:38:24.820 回答
1

简单地说Margin:0px auto：

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

于 2017-02-20T13:16:12.063 回答
1

你可以用不同的方式来做。请参阅以下示例：

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


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
于 2017-12-02T05:28:36.803 回答
1 

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

于 2018-01-25T06:45:04.570 回答
1

居中 div 的主要属性是margin: auto并width:根据要求：

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
于 2018-01-25T07:09:19.307 回答
1 

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

于 2018-08-14T14:49:52.880 回答
1

我找到了与 类似的方法margin-left，但也可以left。

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}
于 2018-12-29T21:02:52.120 回答
1 
#inner {
  width: 50%;
  margin: 0 auto;
}
于 2019-05-29T13:17:41.380 回答
1

CSS justify-content属性

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

#outer {
    display: flex;
    justify-content: center;
}
于 2020-08-18T13:02:12.817 回答
1 

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

}
<div id="outer">
  <div id="inner">hello</div>
</div>
enter code here

于 2020-09-04T18:26:09.083 回答
1

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

方法一：使用边距属性

如果元素是块级元素，则可以使用 margin 属性使元素居中。设置margin-left为margin-right自动（简写 - margin: 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 容器并使用justify-content属性并将其设置为center. 这会将所有元素水平对齐到网页的中心。

#outer {
  display: flex;
  justify-content: center;
  background-color: silver;
}
#inner {
  background-color: #f07878;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

这是使元素居中的经典方法。设置postion:relative为外部元素。将内部元素的位置设置为绝对和left: 50%。这将推动内部元素从外部元素的中心开始。现在使用 transform 属性并设置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>

于 2021-03-22T03:02:09.527 回答
1 

<html>

*{
        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>

于 2022-02-16T08:28:54.940 回答
0

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

这将给出预期的结果。

于 2017-01-13T23:10:40.147 回答
0

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>

于 2021-01-20T06:29:55.763 回答
0 
button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)
于 2021-03-30T07:45:19.943 回答
0 

#outer {
display:grid;
place-items:center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

于 2021-05-15T13:32:47.303 回答
0

我只是建议justify-content: center;在容器显示为 flex 时使用。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>

于 2021-10-30T09:07:31.893 回答
0 
#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}
于 2022-01-20T11:43:37.717 回答
-1

您可以使用链接https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

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

参考https://v4-alpha.getbootstrap.com/examples/cover/

于 2017-07-26T09:29:50.050 回答
-1

对于水平居中的 DIV：

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
于 2019-05-23T12:50:57.837 回答
-3 

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px;
          margin: 0 auto;
          background: brown;
          color: red;
    }

</style>

  </head>

  <body>

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

  </body>
</html>

请试试这个。它可以在没有 HTML 中心标签的情况下工作。

于 2018-07-15T15:00:52.370 回答
-4 
.outer {
    text-align: center;
    width: 100%
}
于 2016-12-09T11:13:58.110 回答
-4 
<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>
于 2017-01-31T07:45:32.977 回答
-5 
<center>

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

</center>
于 2013-12-02T22:48:36.703 回答
-12

居中：自动宽度边距

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

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

这种变通方法有一个副作用：继承了 CSS“text-align”属性，使内联内容居中。通常需要为居中的框显式设置“文本对齐”属性，以抵消 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

于 2013-03-14T15:00:00.553 回答