Question

我有一个类'outerpiccontainer'的div，里面包含另一个div'pic容器'。内部div当前是空的，只是应用了一些样式，它是外部div的80％高度和宽度。

目前，我可以使用10％的左边距（10 + 10 + 80 = 100）来对内部div进行居中。但是我对这个解决方案不满意（如果我改变div之间的大小比例，我将失去我的中心）。是否有一种方法或属性可以将div置于div中？

提前致谢！我有html部分，后面是css。

<section class="outerpiccontainer"> 
    <p>Place photo here</p> 
    <div class="piccontainer"></div>
</section>

.outerpiccontainer 
{
    background-color:#BF1432;
    width:38%;
    height:400px;
    padding:1%;
    border-top:5px inset #DCDCDC;
    border-bottom:5px inset #DCDCDC;
    border-bottom-left-radius: 8%;
    float:left
}

.piccontainer 
{
    background-color:#DCDCDC;
    width:80%;
    height:80%;
    padding:1%;
    border-radius: 50%;
   -moz-box-shadow: 10px 10px 5px black;
   -webkit-box-shadow: 10px 10px 5px black;
    box-shadow: 10px 10px 5px black;
    margin-left: 10%;
    float:left; 
}

Answer 1

使用margin auto水平居中

http://jsfiddle.net/zMrN7/

.piccontainer 
{
    background-color:#DCDCDC;
    width:80%;
    height:80%;
    padding:1% 0;
    border-radius: 50%;
   -moz-box-shadow: 10px 10px 5px black;
   -webkit-box-shadow: 10px 10px 5px black;
    box-shadow: 10px 10px 5px black;
    margin: 0 auto;
}

Answer 2

您可以将内部div设置为display: inline-block，而不是使用浮点数。然后，您可以在容器div上使用text-align: center。看到这个jsfiddle：http://jsfiddle.net/xrrf4/

Answer 3

尝试对子元素使用相对定位和绝对值：

.parent-container {
  position: relative;
}

.child-center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

关于居中http://codepen.io/shshaw/full/gEiDt

的良好链接

如何在div中居中div

3 个答案: