Question

为了使HTML元素居中，我可以使用CSS left: 50%;。然而，这使元素相对于整个窗口居中。

我有一个元素是<div>元素的子元素，我想让孩子关注这个父<div>，而不是整个窗口。

我不希望容器<div>将所有的内容集中在一起，只是一个特定的孩子。

我该怎么做？

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/

Answer 2

实际上CSS3 flex boxes非常简单。

＆＃13;

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

＆＃13;

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

＆＃13;

更新

在我写这个答案的时候，我似乎没有读过OP编辑。 以上代码将以所有内部元素为中心（它们之间没有重叠），但 OP只需要一个特定元素居中，而不是其他内部元素。所以@Warface回答第二种方法更合适，但它仍然需要垂直居中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

HTML

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

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

Answer 4

父div上的

text-align:center;应该做的诀窍

Answer 5

div是固定宽度还是流体宽度？无论哪种方式，对于流体宽度，您可以使用：

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

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

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

#parent {
width:500px;
}

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

Answer 6

只需提供父div position: relative

Answer 7

我相信现代方法是在父容器中使用place-items: center

可以在此处找到示例：https://1linelayouts.glitch.me

Answer 8

如果子元素是内联的（例如，不是div，table等），我会将其包装在div或p内并制作包装器的文本将css属性与中心对齐。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

否则，如果元素是具有固定宽度的块（display: block，例如div或p），我将其左边和右边的css属性设置为汽车。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

您当然可以在包装器元素中添加text-align: center以使其内容也居中。

我不打扰定位，因为恕我直言，这不是解决OP问题的方法，但一定要检查this link，非常有帮助。

Answer 9

为要居中的元素创建一个新的div元素，然后添加一个专门用于居中该元素的类

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

的CSS

.centered{
    text-align:center;
}

Answer 10

我找到了另一个解决方案

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

和身体

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

每当容器变大或变小时，这将使您的内容div居中。在这种情况下，您的内容应该大于容器的1100％而不是居中，但在这种情况下，您可以使用containerSecond更大，并且它将起作用

Answer 11

将text-align: center;分配给父级，将display: inline-block;分配给div。

Answer 12

如果你想使用CSS3：

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

您可能需要进一步搜索，以了解如何获得适合元素宽度的百分比。

Answer 13

例如，我有一个文章div，它位于主要内容div中。在文章里面有一个图像，在该图像下面是一个按钮，样式如下：

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} .article {

}

/ *文章中我希望图像居中* /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ *现在在同一篇文章元素中的这个图像下应该有一个按钮，如同阅读更多当然，当它在响应式设计中时你需要使用em或％* /

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

祝你好运

Answer 14

如果您想将元素置于div中并且不关心分区大小，则可以使用Flex功能。我更喜欢使用flex而不使用精确的大小元素。

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

正如您所看到的，外部div是Flex容器，而Inner必须是使用flex: 1 1 auto;指定的Flex项目，以便更好地理解您可以看到这个简单的示例。 http://jsfiddle.net/QMaster/hC223/

希望得到这个帮助。

Answer 15

left：50％与最近的父级相关，并且分配了静态宽度。尝试宽度：500px或父div上的东西。或者，将您需要的内容显示为中心：阻止并将左右边距设置为自动。

Answer 16

我想要魔法。

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

Answer 17

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>

Answer 18

仅将特定孩子居中：

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

Answer 19

您可以这样使用bootstrap flex类名：

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

即使内部包含多个元素，该功能也可以使用。

Answer 20

首先，您可以使用左侧：50％将其相对于父级div居中，但为此您需要学习CSS定位。

许多可能的解决方案是做类似

的事情

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

如果你的中心div相对定位，你可以做到

    .mydiv { position:relative; margin:0 auto; }

CSS：<div>元素</div>中的中心元素

20 个答案:

更新