如何水平居中<div>？</div>

时间：2008-09-22 12:27:58

标签： html css alignment centering

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

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

120 个答案:

答案 0 :(得分：4402)

您可以将此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;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

答案 1 :(得分：1178)

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

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

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

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

答案 2 :(得分：341)

最好的方法是使用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属性。

<强>的Flex ：

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

了解有关居中子元素的更多信息

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

答案 3 :(得分：233)

假设您的div为200px宽：

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

确保父元素为positioned，即相对，固定，绝对或粘性。

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

https://jsfiddle.net/gjvfxxdj/

答案 4 :(得分：213)

我已创建此example以展示如何垂直和水平 align。

代码基本上是这样的：

#outer {
  position: relative;
}

和... 

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

即使您重新调整屏幕，它也会保留在center。

答案 5 :(得分：181)

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

此语法已过时，不应再使用。 [另见this post]。

因此，仅仅为了完整性，这是使用 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 here's语法的旧浏览器，那么这是一个值得一看的好地方。

答案 6 :(得分：128)

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

您可以使用：

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

答案 7 :(得分：83)

以未知高度和宽度为中心

水平和垂直。它适用于相当现代的浏览器（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上进一步修补它。

答案 8 :(得分：81)

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

答案 9 :(得分：81)

CSS3's box-align property 

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

答案 10 :(得分：79)

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

答案 11 :(得分：56)

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

注意：我正在分享此代码，因为Google将我带到了Stack Overflow解决方案＆amp;一切都会有效，除了隐藏的元素没有任何宽度＆amp;在显示之前无法调整大小/居中。

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

答案 12 :(得分：51)

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

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

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

答案 13 :(得分：49)

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

答案 14 :(得分：44)

这是我的答案。

#outerDiv {
  width: 500px;
}

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

答案 15 :(得分：41)

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

这是显示水平和垂直对齐的Fiddle。

有关详情，请访问Mozilla Developer Network。

答案 16 :(得分：39)

克里斯·科伊尔（Chris Coyier）写了excellent post关于未知中心的问题＆＃39;在他的博客上。它是多种解决方案的综合。我发布了一个未发布在此问题中的内容。它有更多的浏览器支持，然后是flexbox-solution，你不会使用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;
}

答案 17 :(得分：34)

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

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

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

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

答案 18 :(得分：29)

例如，请参阅this link和下面的代码段：

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内容必须与此example on 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>

然后看这个example on fiddle。

答案 19 :(得分：26)

仅水平居中

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

容器：

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

另见this Fiddle！

水平和水平居中垂直

根据我的经验，垂直和水平对齐 框的最佳方法是使用其他容器并应用以下属性：

外部容器：

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

另见this Fiddle！

答案 20 :(得分：25)

最简单的方法：

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

答案 21 :(得分：24)

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

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

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

  1. 在.inner
    2. 中包裹.center-helper
  2. 使.center-helper成为内联块;它与.inner的大小相同，使其宽300px。
  3. 相对于其父级，将.center-helper向右推50％;这将其左侧置于500px wrt。外。
  4. 相对于其父级，向左推动.inner 50％;这将其左侧置于-150px wrt。中心帮手，这意味着它的左边是500 - 150 = 350px wrt。外。
  5. 将.outer上的溢出设置为隐藏以防止水平滚动条。

    6. 演示：

    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>

    .outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

答案 22 :(得分：23)

你可以做这样的事情

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

答案 23 :(得分：23)

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

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

答案 24 :(得分：21)

文字对齐：中心

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

＆＃13;
＆＃13; 
#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
＆＃13; 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
＆＃13;
＆＃13;
＆＃13;

保证金：0自动

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

＆＃13;
＆＃13; 
#inner {
  display: table;
  margin: 0 auto;
}
＆＃13; 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Flexbox的

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

请注意： Flexbox与大多数浏览器兼容，但不是全部。有关浏览器兼容性的完整和最新列表，请参阅here。

＆＃13;
＆＃13; 
#inner {
  display: inline-block;
}

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

变换

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

＆＃13;
＆＃13; 
#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
＆＃13; 
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
＆＃13;
＆＃13;
＆＃13;

<center>（已弃用）

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

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

答案 25 :(得分：21)

您可以将int result = JOptionPane.showConfirmDialog(parent, "Are you married?"); 用于外部div，并横向居中，您必须添加ng build --aot --prod 

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

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

答案 26 :(得分：20)

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

答案 27 :(得分：20)

此方法也可以正常使用：

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

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

答案 28 :(得分：20)

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

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

答案 29 :(得分：19)

我找到了一个选项：

每个人都说要使用：

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

答案 30 :(得分：19)

如果有人想要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;");
});

答案 31 :(得分：18)

尝试使用

margin: 0 auto;

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

text-align: center;

答案 32 :(得分：11)

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

在CSS中水平对齐：

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

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

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

答案 33 :(得分：8)

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

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

答案 34 :(得分：8)

CSS 3：

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

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

关于justify-content的不同值的好DEMO。

Enter image description here

CanIUse：Browser-Compatability

试试吧！：

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

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 35 :(得分：8)

从2019年开始，由于此问题仍然很受欢迎，因此一个非常简单且跨浏览器的水平居中答案是将此规则应用于父元素：

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

答案 36 :(得分：8)

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

答案 37 :(得分：7)

我最近发现的好处是，混合使用line-height + vertical-align和50%左侧技巧，您可以在另一个动态大小的框内center动态调整大小的框，使用纯CSS在水平和垂直上。

请注意，您必须使用在现代浏览器+ IE8中测试的跨度（和inline-block）。 的 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;
}

See example here。

答案 38 :(得分：7)

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

答案 39 :(得分：7)

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

答案 40 :(得分：6)

#inner div的以下CSS怎么样：

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

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

答案 41 :(得分：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>

答案 42 :(得分：4)

您可以使用flexbox。

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

您可以在此链接上了解有关详情：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 43 :(得分：4)

可以使用 CSS 3 flexbox 。使用弹性框时有两种方法。

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

    2. #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;添加到孩子。

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

答案 44 :(得分：4)

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

#outer{
    position: relative;
}

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

答案 45 :(得分：4)

将div中的div居中

＆＃13;
＆＃13; 
.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;						
}
＆＃13; 
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 46 :(得分：4)

使用：

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

风格：

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

如果你想横向居中，你应该写如下：

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

答案 47 :(得分：4)

我使用了the source或Flexbox

  1. Flexbox 

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

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

答案 48 :(得分：4)

使用网格

一种简单而现代的方式是使用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>

答案 49 :(得分：3)

广泛使用且在许多浏览器（包括旧浏览器）中使用的最着名的方法是使用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中心，再加上don不要忘记孩子的width，否则它不会像预期的那样集中！

答案 50 :(得分：3)

我想回答这个，因为我注意到没有人提到过calc方法。用法是你所居中的div，如果你知道它的宽度，让我们说它是1200像素，请选择：

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

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

答案 51 :(得分：3)

这是使用 flexbox 水平居中的另一种方法，而不指定内部容器的任何宽度。我们的想法是使用伪元素来推动内部内容从右侧和左侧。

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

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

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

.inner {
  border: 1px solid red;
  padding: 5px;
}
＆＃13; 
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 52 :(得分：3)

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

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

fiddle link

答案 53 :(得分：3)

这肯定会在水平和垂直方向上将#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>

答案 54 :(得分：3)

您现在可以使用flex-box女巫来购买它是一种很好的技术。 要使用flex-box，应将display: flex;和align-items: center;赋予您的父元素或#outer div元素。代码应该是这样的：

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

这应该使您的孩子或#inner div水平居中。但是您实际上看不到任何变化。因为我们的#outer div没有高度，或者换句话说，它的高度被设置为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>

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

答案 55 :(得分：3)

简单点吧！

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

答案 56 :(得分：3)

最简单的方法之一... 

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

答案 57 :(得分：3)

使用Sass（SCSS语法），您可以使用mixin：

带有 translate 

// 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元素。

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

尝试this CodePen！

答案 58 :(得分：3)

在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在垂直和水平方向上居中对齐。

答案 59 :(得分：3)

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

在 HTML 文件中

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

在 CSS 文件中

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

答案 60 :(得分：2)

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

答案 61 :(得分：2)

是的，这是水平对齐的简短代码。我希望你喜欢这段代码。

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

答案 62 :(得分：2)

这很简单。

只需确定要为内部div提供的宽度，然后使用以下CSS。

CSS 

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

答案 63 :(得分：2)

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

答案 64 :(得分：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;
}

答案 65 :(得分：2)

将一些$data = HostRequest::where(function ($query) use ($searchname) { $query->orwhere('email', 'like', '%'.$searchname.'%') ->orWhere('request_url', 'like', '%'.$searchname.'%'); }) ->where('host_id', $hostid) ->latest('host_id') ->paginate($size); 提供给内部width并在CSS属性中添加div。

答案 66 :(得分：2)

<强> CSS 

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

<强> HTML 

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

答案 67 :(得分：2)

  

最简单的回答将 margin：auto; 添加到内部。

<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

enter image description here

答案 68 :(得分：2)

使用以下代码。

HTML 

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

CSS 

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

答案 69 :(得分：2)

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

以下是一个例子：

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

答案 70 :(得分：2)

我很抱歉，但这个1990年代的宝宝刚为我工作：

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

我为这罪而下地狱吗？

答案 71 :(得分：2)

您可以添加以下代码：

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

答案 72 :(得分：2)

我们可以使用下一个CSS类，它允许中心垂直和水平对齐其父元素：

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

答案 73 :(得分：2)

使用此代码：

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

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

答案 74 :(得分：2)

使用：

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

答案 75 :(得分：2)

这会水平和垂直地集中你的内部div：

margin: 0 auto;

仅对于水平对齐，请更改

margin: auto 0;

和垂直，改变

{{1}}

答案 76 :(得分：2)

最简单的方法之一就是使用display: flex。外部div仅需要具有显示柔性，而内部div需要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>

答案 77 :(得分：2)

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

答案 78 :(得分：2)

这是水平居中

的最佳示例 

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

答案 79 :(得分：2)

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

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

答案 80 :(得分：2)

就这样做：

https://104.131.59.122/uploads/my_images/gallery_429/im_295_1617796300.mp4

CSS

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

答案 81 :(得分：2)

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

.HTML

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

.CSS

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

答案 82 :(得分：1)

我知道我回答这个问题有点迟了，我没有费心去阅读每一个答案，所以这个可能是重复的。 Here's my take：

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

答案 83 :(得分：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;
}

答案 84 :(得分：1)

首先：您需要为第二个div赋予宽度：

例如：

HTML 

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

CSS：

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

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

答案 85 :(得分：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并享受。

答案 86 :(得分：1)

试试这个：

#outer{
    display: inline-block;
    height: 100%;
    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;
}

答案 87 :(得分：1)

最好的方法是使用表格单元格显示（内部），它紧跟在具有显示表格（外部）的div之后，并设置内部div（具有表格单元格显示）的垂直对齐方式以及您在内部div放在div或page的中心。

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

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

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

答案 88 :(得分：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;
}

Fiddle

答案 89 :(得分：1)

将text-align:center;添加到父div 

#outer {
    text-align: center;
}

https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage

或

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

https://jsfiddle.net/7qwxx9rs/

答案 90 :(得分：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>

答案 91 :(得分：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%;
}

答案 92 :(得分：1)

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

答案 93 :(得分：1)

根据要求，将div居中的主要属性为margin: auto和width:：

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

答案 94 :(得分：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>

答案 95 :(得分：1)

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

对于正常情况，如果您使用div静态方式

如果您希望div在其父级为绝对时居中居中，则为示例：

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

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

答案 96 :(得分：1)

这对我有用：

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

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

答案 97 :(得分：1)

我发现与margin-left类似，但也可以left。

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

答案 98 :(得分：1)

在前面的示例中，他们使用了margin: 0 auto，display:table，其他答案使用了“带有转换和翻译”。

那只带标签呢？每个人都知道有一个<center>标记，HTML5只是不支持该标记。但它可以在HTML5中使用。例如，在我的旧项目中。

它正在运行，但现在不仅MDN Web Docs，而且其他网站也建议不要再使用它。在 Can I use 的此处，您可以查看MDN Web文档的注释。但是，无论如何，都有这样的方法。这只是要知道。总是被某事所吸引是非常有用的。

Enter image description here

答案 99 :(得分：1)

尝试一下：

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

答案 100 :(得分：1)

在我的情况下，我需要将一个下拉菜单（在屏幕上居中）的下拉菜单（使用flexbox作为其项）居中放置在可以垂直放置多个位置的按钮下方。在我将位置从绝对更改为固定之前，没有任何建议可以奏效，例如：

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

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

答案 101 :(得分：1)

对于centre an element horizontally，您可以使用以下方法：

方法一：使用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 属性并设置 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>

答案 102 :(得分：1)

if 11 in numbers:
    number[11] = 1

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

答案 103 :(得分：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>

这将产生预期的结果。

答案 104 :(得分：0)

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

答案 105 :(得分：0)

我们可以使用 FLEXBOX 轻松实现这一目标：

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

水平放置div内的div：

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

enter image description here

将div垂直居于div内

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

enter image description here

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

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

enter image description here

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

答案 106 :(得分：0)

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

答案 107 :(得分：0)

如果您的父母有一些身高，请说身体{height：200px} 或如下所示的父级div＃outer的高度为200px，然后按如下所示添加css

html：

us_values[i]

css：

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

然后，子内容（例如div＃centered内容）将垂直或水平居中，而无需使用任何位置CSS。要删除垂直居中的行为，只需将其修改为以下CSS代码：

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


#centered {
  margin: 0px auto;
}

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

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

答案 108 :(得分：0)

CSS 调整内容属性

它对齐 Flexbox项位于容器的中心：

SELECT * 
FROM @Table
WHERE '|' + A + '|' + B + '|' + C + '|' like '%foobar%'

答案 109 :(得分：0)

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

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

答案 110 :(得分：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>

答案 111 :(得分：0)

button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)

答案 112 :(得分：-1)

我正在为想要在水平和垂直方向上对齐内容的设计师分享这个答案。或者你可以说在网页的中心。 请转到this site下载文件。

CSS代码

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

答案 113 :(得分：-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/

答案 114 :(得分：-1)

对于水平居中DIV 

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

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

答案 115 :(得分：-2)

$id = $this->route('user');

plz请尝试在没有html中心标记的情况下使用

答案 116 :(得分：-3)

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

答案 117 :(得分：-4)

<center>

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

</center>

答案 118 :(得分：-4)

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

答案 119 :(得分：-8)

居中：自动宽度边距

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

有一个简单的解决方法。 （当你反击那个词诱发的恶心时，暂停一下。）准备好了吗？ Internet Explorer 5 / Windows错误地将CSS“text-align”属性应用于块级元素。为包含块级元素（通常是BODY元素）声明“text-align：center”会在Internet Explorer 5 / Windows中水平居中显示该框。

此解决方法存在副作用：CSS“text-align”属性是继承的，以内联内容为中心。通常需要为居中框明确设置“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

相关问题
最新问题