要居中一个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>

其他回答

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/

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

如果你想使用CSS3:

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

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

如果你想在div中居中,不关心除法大小,你可以使用Flex功能。我更喜欢使用flex,不使用元素的精确大小。

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

如你所见,Outer div是Flex容器,Inner必须是Flex项目,指定Flex: 1 1 auto;为了更好地理解,您可以看看这个简单的示例。http://jsfiddle.net/QMaster/hC223/

希望这对你有所帮助。

为您的元素创建一个新的div元素居中,然后添加一个类专门为该元素居中,如下所示

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

Css

.centered{
    text-align:center;
}