在响应div中居中div

Question

基本上我有3个浮动元素，它们彼此相邻，并在调整浏览器窗口大小时按比例缩小。 现在在一定的宽度（@media（最大宽度：800px））下，元素得到一个固定的宽度和一个清晰：两者都使它们低于彼此并且不再缩放。

我现在要做的就是将这3个div放在父母的内部。

margin:0 auto没有帮助

高于800像素的宽度：

800像素宽度以下：

- ＆GT; 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

用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