css - 如何在不知道其宽度的情况下将 div 水平居中？

Question

这是全屏结果：http: //jsfiddle.net/anik786/UYkSf/4/embedded/result/

这是 HTML/CSS：http: //jsfiddle.net/anik786/UYkSf/4/

这是HTML：

<div class="gallery_container">
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>

和CSS：

* {margin: 0; padding: 0;}

body {background: black;font-family: arial;}
.gallery_container{
 /* Insert styles here to make container center on page */
}
.pic {
 height: 300px;
width: 300px;
overflow: hidden;
margin: 20px;
border: 10px solid white;
float: left;
}

.pic img{ 
height: 300px;
width: 300px; 
}

问题是当窗口大小为特定宽度时，右侧的空间太大（通过调整浏览器大小自己尝试全屏结果）。

因此，我试图使容器居中，以便画廊始终位于屏幕中间。我通常使用：

边距：0 自动；

但是我不能使用它，因为我不知道容器的宽度是多少（因为它取决于窗口大小）。

请帮忙！提前致谢！

Answer 1

有很多方法可以使元素居中：

保证金方式：

具有设定的宽度或显示：inline-block；您可以使用：

margin-left: auto;
margin-right: auto;

文本对齐方式：

您可以将其添加到父级：

text-align: center;

绝对方式：

position: absolute;
left: 50%;
margin-left: width/2;

或者

position: absolute;
left: 50%;
transform: translate(0, -50%);

对您来说最好的方法是删除浮动，.pic而不是添加display: inline-block. 然后在父级上添加text-align: center;

Answer 2

您可以使用display: table将未定义给定宽度的项目居中。然后使用margin: 0 auto;

示例http://jsfiddle.net/LstNS/11/

div {
    margin: 0 auto;
    display: table;
}

Answer 3

您还可以使用 max-width 居中

max-width: 80%;
margin: 0 auto;

我假设画廊在响应式站点中无论如何都会有一个 % 宽度。