logo标签列表

如何水平居中一个元素？

htmlcssalignmentcentering
5066

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
37
在那些很棒的答案中，我只想强调你必须给 "#inner" 设置一个 "width" 属性，否则它会默认为 "100%"，这样你就无法确定它是否已经居中了。 - Jony
1
display:flex; 是最容易记住的（Chrome 在 DevTools 中提供指南），并支持在两个轴上居中。 - Akshay K Nair
135个回答
23

我发现了一个可行的选项：

大家都说要使用：

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 */
}
text-align 属性用于文本在其容器中的对齐，而不是将其容器对齐到其父元素。 - Lalit Kumar Maurya
我测试了它，我在设置子元素居中时遇到了问题。当你有多个子元素时，需要多次使用margin:0 auto来对齐。但是，使用text-align:center可以让父元素将这些子元素居中，即使它们是元素而不是文本。测试一下，看看会发生什么。 - Pnsadeghy
仅文本居中对齐。你目前的代码是正确的，但当你编写包含具有不同宽度和颜色的子元素的容器CSS时，你的代码无法工作。再次测试它！！！ - Lalit Kumar Maurya
看这个例子 http://jsfiddle.net/uCdPK/2/，告诉我你对它有什么看法！！！ - Lalit Kumar Maurya
18
如果有人想要一个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;");
});
18

尝试玩弄一下

margin: 0 auto;

如果您想将文本居中，可以尝试使用以下代码：
text-align: center;
18

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

<div id="outer">
    <div id="inner">Foo foo</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;
}

在这里输入图片描述

18

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

在CSS中水平居中对齐：

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

CSS中垂直和水平居中对齐：

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

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

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

使用网格布局

一种相当简单和现代的方法是使用 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>

2
今天刚学到这个。人们应该使用这个方法来解决居中问题，而不是其他一些hacky的方式。想要了解更多信息的人，请访问https://web.dev/one-line-layouts/。 - Joshua
12

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

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

我最近发现了一个好东西，结合使用line-height+vertical-align和50%的左侧技巧，您可以使用纯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;
}

点击此处查看示例。

9

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接