html html居中 如何水平居中<div>?




html居中 (24)

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

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

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

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

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

对于Firefox和Chrome： 

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

对于Internet Explorer，Firefox和Chrome： 

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

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

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

注意：我正在分享这段代码，因为谷歌带我参加了这个解决方案，除了隐藏的元素没有任何宽度，并且在显示之前无法调整大小/居中，所以一切都会有效。 

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

你可以做这样的事情 

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

文字对齐：中心

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

Flexbox的

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

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

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

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

试着玩 

margin: 0 auto;

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

text-align: center;

例如，请参阅以下链接和以下代码段： 

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

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

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来展示如何垂直和水平 align 。

代码基本上是这样的： 

#outer {
  position: relative;
}

和... 

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

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

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

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

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

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

以未知高度和宽度为中心

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

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

有关Mozilla Developer Network的更多信息。

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

设置width并将margin-left和margin-right为auto 。 但这仅适用于横向 。 如果你想要两种方式，那么你就是两种方式。 不要害怕尝试; 它不像你会打破任何东西。

您可以将此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>

这个方法也很好用： 

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

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

Chris Coyier在他的博客上撰写了一篇关于“未知中心”的优秀文章 。 这是多种解决方案的综合。 我发布了一个未在此问题中发布的内容。 它有更多的浏览器支持，然后是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;
}

最简单的方法： 

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

这是我的答案。 

#outerDiv {
  width: 500px;
}

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

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

您可以使用： 

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

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

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

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

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

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

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

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

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

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

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

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

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

如果您需要支持使用较旧语法的旧版浏览器， here's一个很好看的地方。






html居中   flex水平居中   div居中显示   div居中   div垂直居中   div内容居中   div元素居中   css水平垂直居中   css居中   body居中   html   css   alignment   centering  

centering