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

Question

CSS：<div>元素内的中心元素要居中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/