CSS：如何在<div>元素中居中元素

Question

要使HTML元素居中，可以使用CSS left: 50%;。但是，这样会将元素相对于整个窗口居中。

我有一个元素，它是<div>元素的子元素，并且我想将该子元素与父<div>元素居中对齐，而不是整个窗口。

我不希望容器<div>的所有内容都居中，只有一个特定的子元素需要这样做。

- Randomblue

Answer 1

将text-align:center;设置到父级div中，将margin:auto;设置到子级div中。

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

这是一个很好的资源，可以让大部分内容居中显示。
http://howtocenterincss.com/

- pasine

---

嗯...我不希望整个父级div都居中文本。虽然这解决了问题，但又引发了另一个问题！ - Randomblue

您可以在子元素中设置text-align:left;，以使文本正确对齐。 - pasine

@pasine 在 <i> 元素上似乎无法使用 text-align 属性。但是给它一个类可以解决问题。 - nclsvh

有没有办法使该元素在垂直和水平方向上都居中？ - Gradyn Wursten

@GmanSmith，你可以使用display: table-cell或flexbox来实现此功能。请查看我添加的链接。 - pasine

Answer 2

使用CSS3的flex boxes非常简单。

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

更新:

看起来我在回答时没有注意到原帖的编辑。上述代码将使所有内部元素居中（它们之间不会重叠），但是原帖想要特定元素居中，而不是其他内部元素。因此@Warface的第二种方法更为适合，但仍需要垂直居中：

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

- Gerard Reches

Answer 3

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

超文本标记语言

<div class="divWrapper">Tada!!</div>

这将使div居中

2016年 - HTML5 + CSS3 方法

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

修改了一下

https://jsfiddle.net/1z7m83dx/

- Warface

---

但它也会使整个身体集中，不是吗？ - Randomblue

那么 divWrapper 中的内容将会被居中，但是如果你想要放置在该 Div 之外的某些元素，它们就不会被居中。 - Warface

精确宽度（960像素）并不适用于大多数情况。 - QMaster

@QMaster 我知道这篇帖子有点旧了，我应该在其中加入HTML5的功能。 - Warface

这里有一个很好的解释：https://www.w3.org/Style/Examples/007/center.en.html。 - Purplejacket

Answer 4

你可以像这样使用Bootstrap Flex类名：

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

这将适用于内部元素数量的任何情况。

- Romi Erez

Answer 5

仅使特定的子元素居中：

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

或者，你也可以使用flex，但这会使所有子元素都居中

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

- Ayan

Answer 6

在父级 div 上加上 text-align:center; 就可以解决问题。

- Kevin Bowersox

---

我想要对齐的不是文本，而是整个元素（例如按钮）。 - Randomblue

如果它在 div 中，它应该居中对齐，对于块元素可能会有一些棘手。 - Kevin Bowersox

Answer 7

标签是固定宽度还是流动宽度？无论如何，对于流动宽度，您可以使用以下方法：

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

或者您可以将父级div设置为text-align:center;，并将子div设置为text-align:left;。

left:50%;仅在将div设置为position:absolute;时根据整个页面居中。如果您将div设置为left:50%;，它应该相对于父div的宽度进行居中。对于固定宽度，请执行以下操作：

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

- Purag

Answer 8

只需给父级div添加 position: relative 属性。

- stephenmurdoch

Answer 9

我认为现代的做法是在父容器中使用`place-items: center`。

可以在这里找到一个例子：https://1linelayouts.glitch.me。

- kmartinho

---

注意：还需要使用 display:grid; - 两个指令 (display/place-items) 都应用于父容器。同时请注意，父容器需要一个高度才能垂直居中。*(与 flexbox 解决方案非常相似（也应用于父容器）：* display:flex; justify-content:center; align-items:center; ) - cssyphus

Answer 10

在使用flex后，它会显示文章。

.container{
  display:flex;
  color:blue;
  background-color: yellow;
  justify-content:center;
 
}

<div class="container">
  <div>Element</div>
  </div>

and if you set element Center elements horizontally and vertically.

.container{
  display:flex;
  color:blue;
  height:100px;
  background-color: yellow;
  justify-content:center;
  align-items:center;
}

<div class="container">
  <div>Element</div>
  </div>

- Parthis