要居中一个HTML元素,我可以使用CSS左:50%;。但是,这使得元素相对于整个窗口居中。

我有一个元素,它是<div>元素的子元素,我想让子元素以<div>这个父元素居中,而不是整个窗口。

我不希望容器<div>的所有内容居中,只是一个特定的子。


当前回答

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

其他回答

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

和左:50%;当div设置为position:absolute时,只根据整个页面居中。如果你将div设置为左侧:50%;它应该相对于父div的宽度。对于固定宽度,这样做:

#parent {
width:500px;
}

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

你可以像这样使用bootstrap flex类名:

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

即使里面有很多元素也可以。

我相信现代的方法是在父容器中放置位置-项目:居中

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

如果你想使用CSS3:

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

您可能需要做进一步的搜索,以弄清楚如何使百分比适合元素的宽度。

如果子元素是内联的(例如不是一个div,表格等),我会把它包装在一个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>

否则,如果元素是一个具有固定宽度的块(显示:块,例如div或p),我将其左距和右距css属性设置为auto。

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

当然,您也可以向wrapper元素添加text-align: center,使其内容也居中。

我不会费心定位,因为依我之见,这不是OPs问题的解决方法,但一定要查看这个链接,非常有用。