如何水平居中<div>？

Question

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

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

Answer 1

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

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

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

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

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

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

这里的工作示例:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

Answer 2

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

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

#inner {
  display: inline-block;
}

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

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

Answer 3

最好的方法是使用CSS 3.

盒子型号:

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

#inner {
  width: 50%;
}

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

Flex:

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

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

• 链接2

• 链接3

• 链接4

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

• 为什么W3C盒型号更好？

Answer 4

假设您的div很200px宽:

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

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

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

https://jsfiddle.net/gjvfxxdj/

Answer 5

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

代码基本上是这样的:

#outer {
  position: relative;
}

和...

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

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

Answer 6

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

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

因此,为了完整起见,这是使用Flexible 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>

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

Answer 7

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

您可以使用:

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

Answer 8

以未知高度和宽度为中心

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

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

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

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

Answer 9

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

Answer 10

CSS3的box-align属性

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

Answer 11

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

Answer 12

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

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

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

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

Answer 13

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

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

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

Answer 14

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

Answer 15

这是我的答案.

#outerDiv {
  width: 500px;
}

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

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

Answer 16

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

有关Mozilla Developer Network的更多信息.

Answer 17

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

Answer 18

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

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

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

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

Answer 19

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

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内容必须像小提琴上的这个例子.

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>

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

Answer 20

最简单的方法:

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

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

Answer 21

仅水平居中

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

容器:

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

另见这个小提琴!

Answer 22

You can do something like this

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

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

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

Answer 23

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

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

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

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

演示:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

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

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

Answer 24

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

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

Answer 25

文字对齐:中心

应用text-align: center内联内容在行框中居中.但是,由于内部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>

Flexbox的

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

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

#inner {
  display: inline-block;
}

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

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

#inner {
  display: inline-block;
}

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

Answer 26

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

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

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

Answer 27

好吧,我设法找到一个可能适合所有情况的解决方案,但使用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);
  })
});

Answer 28

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

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

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

Answer 29

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

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

Answer 30

我找到了一个选项:

每个人都说使用:

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

Answer 31

试试玩吧

margin: 0 auto;

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

text-align: center;

Answer 32

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

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

Answer 33

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

在 CSS 中水平对齐居中：

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

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

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

Answer 34

您可以像这样简单地使用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
}

要不然

使用转换：

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

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

使用自动前缀：

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

Answer 35

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

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

Answer 36

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

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

Answer 37

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

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

Answer 38

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

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

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

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

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

#outer {
  display: flex;
}

#inner {
  margin: auto;
}

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

Answer 39

CSS 3:

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

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

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

CanIUse:浏览器兼容性

试试吧!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}

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

Answer 40

带网格

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

Answer 41

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

方法一：使用margin属性

如果元素是块级元素，则可以使用 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>

方法2：使用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: 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>

Answer 42

如何使用 CSS将 a 水平居中<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%和负数将块级元素居中 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%和负数将块级元素居中 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>

display: inline-block6. 使用和将元素居中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>

display: table7. 使用,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>

display: flex8. 使用和将元素居中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>

display: grid9. 使用和将元素居中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>

Answer 43

我最近发现的好东西,混合使用line-height+ vertical-align和50%左边的技巧,你可以center使用纯CSS在水平和垂直两个动态大小的盒子内部动态大小的盒子.

请注意,您必须使用跨度(和inline-block),在现代浏览器+ IE8中进行测试. 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;
}

见这里的例子.

Answer 44

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

Answer 45

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

Answer 46

#innerdiv 下面的CSS怎么样:

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

我大多使用这个CSS来居中div.

Answer 47

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

Answer 48

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

无副作用：当在居中元素内的 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%));

Answer 49

Make it simple!

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

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

Answer 50

最简单的方法之一...

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

Answer 51

如果您有某个高度的父级，body{height: 200px} 或者如下所示，父级 div#outer 的高度为 200px，则添加 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%：

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

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

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

Answer 52

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

Answer 53

要在中间的 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 垂直和水平居中对齐。

Answer 54

只需这样做：

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

CSS

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

Answer 55

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

在HTML文件中

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

在CSS文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}