Question

我有一个固定宽度的父级

.parent {
    width: 800px;
    height: 400px;
    display: block;
}

我正在尝试根据图像的宽度将具有动态宽度的孩子置于其中心。我不希望子div具有任何背景颜色（因此只要与图像一样大）

.child {
  background: red;
  //how to center?
}
.image-container {
    max-height: 253px;
    overflow: hidden;
    padding: 0;
}
.image-container img {
    max-width: 100%;
}

我如何将div居中？

JSFiddle

Answer 1

使用text-align: center并从position: absolute班级中移除child。

Fiddle

.parent {
    width: 800px;
    height: 400px;
    display: block;
    background: blue;
    position: absolute;
    text-align: center;
}
.child {
    margin-left: auto;
    margin-right: auto; 
}

Answer 2

将.child设置为：

.child { display: block; margin: 0 auto; width: 200px; }

http://jsfiddle.net/YjwCq/4/

具有动态宽度的CSS居中div

2 个答案: