如何水平居中一个元素？

Question

如何水平居中一个元素？

5066

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

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

- Lukas

37

在那些很棒的答案中，我只想强调你必须给 "#inner" 设置一个 "width" 属性，否则它会默认为 "100%"，这样你就无法确定它是否已经居中了。 - Jony

1

display:flex; 是最容易记住的（Chrome 在 DevTools 中提供指南），并支持在两个轴上居中。 - Akshay K Nair

135个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajesh · Answer 1

请使用以下CSS内容来设置#inner div:

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

我通常使用这个CSS内容来居中

元素。

- Legends · Answer 2

CSS 3：

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

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

针对不同的justify-content值，这是一个很不错的DEMO。

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>

- anand jothi · Answer 3

8

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

- anand jothi

谢谢你尝试帮助楼主 :). 你不应该添加与已提供答案完全相同的答案。我猜这个碰撞是一个错误，但这可能完全是从被接受的答案复制和粘贴过来的。 - Rapnar

- Saurav Rastogi · Answer 4

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

- Satish Chandra Gupta · Answer 5

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

方法一：使用margin属性

如果该元素是块级元素，则可以使用margin属性将其居中。将margin-left和margin-right设置为auto（简写 - 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：使用绝对定位技术

这是一种经典的居中元素方法。将外部元素设置为position: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>

- Rounin - Standing with Ukraine · Answer 6

如何使用CSS将一个

水平居中在另一个

中？以下是一些居中方法，包括：

1. 使用margin和auto 2. 使用margin和calc() 3. 使用padding、box-sizing和calc() 4. 使用position: absolute和负的margin-left 5. 使用position: absolute和负的transform: translateX() 6. 使用display: inline-block和text-align: center 7. 使用display: table和display: table-cell 8. 使用display: flex和justify-content: center 9. 使用display: grid和justify-items: center 1. 使用auto属性设置水平margin来居中块级元素。

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

2. 使用 `calc` 和水平边距将块级元素居中

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

3.使用`calc`和水平填充+ `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>

4.使用`position: absolute`和`left: 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>

5. 使用 `position: absolute`，`left: 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>

6. 使用`display: inline-block`和`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: flex` 和 `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: grid`和`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>

- Sawan mishra · Answer 7

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

- proseosoc · Answer 8

动态宽高无需包裹元素/父级元素即可居中:

无副作用: 当在居中元素内使用Flexbox的margin时，它不会限制居中元素的宽度小于视口宽度。

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

- Hassan Siddiqui · Answer 9

简化它！

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

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

- Tharindu Lakshan · Answer 10

这可以通过使用许多方法来完成。许多人给出了正确且有效的答案。我再提供一种不同的模式。

在 HTML 文件中：

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

在 CSS 文件中。

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

如何水平居中一个元素？

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

方法一：使用margin属性

方法二：使用CSS flexbox

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

2. 使用 calc 和水平边距将块级元素居中

3.使用calc和水平填充+ box-sizing来居中块级元素

4.使用position: absolute和left: 50%以及负的margin-left将块级元素居中

5. 使用 position: absolute，left: 50% 和 负的 transform: translateX() 来使块级元素居中

6. 使用display: inline-block和text-align: center将元素居中

7.使用display: table、padding和box-sizing 居中元素

8. 使用 display: flex 和 justify-content: center 将元素居中对齐

9. 使用display: grid和justify-items: center将元素居中

2. 使用 `calc` 和水平边距将块级元素居中

3.使用`calc`和水平填充+ `box-sizing`来居中块级元素

4.使用`position: absolute`和`left: 50%`以及负的`margin-left`将块级元素居中

5. 使用 `position: absolute`，`left: 50%` 和负的 `transform: translateX()` 来使块级元素居中

6. 使用`display: inline-block`和`text-align: center`将元素居中

7.使用`display: table`、`padding`和`box-sizing` 居中元素

8. 使用 `display: flex` 和 `justify-content: center` 将元素居中对齐

9. 使用`display: grid`和`justify-items: center`将元素居中