在响应div中居中div

Question

基本上，我有3个浮动元素，它们彼此相邻，并且在调整浏览器窗口大小时会按比例缩小。 现在，在一定宽度下（@media（最大宽度：800像素）），元素将获得固定的宽度和clear：both两者，以便它们彼此之间且不再缩放。

我现在想做的就是将这3个div置于其父对象的中心。

margin:0 auto您没有帮助

800像素以上：

低于800像素的宽度：

-> Div应该在黄色的中间居中

我用于媒体查询的代码：

@media (max-width: 800px){
.data .data_column{width:215px;background-color:red;clear:both; margin: 0 auto;}
.data{width:90%;background-color:yellow;}

}

Answer 1

用float: none替换clear:both用float: none足以让margin: auto完成工作。

Answer 2

请尝试以下操作：

<div class="data">
    <div class="data-column"></div>
</div>

和CSS：

.data {
    position: relative;
    width:90%;
    height: 250px;
    background-color:yellow;
}

.data-column {
    clear:both;
    position: absolute;
    height: 150px;
    width: 215px;

    /* horizontal centering */
    right: 0;
    margin-right: auto;

    left: 0;
    margin-left: auto;

    /* vertically centering */        
    top: 0;
    margin-top: auto;

    bottom: 0;
    margin-bottom: auto;

    background-color: red;
}

这里是一个FIDDLE