Как горизонтально центрировать 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; 
} 

Проблема i что когда размер окна имеет определенную ширину, с правой стороны слишком много места (попробуйте сами получить результат полного экрана, изменив размер браузера).

Поэтому я пытаюсь центрировать контейнер так, чтобы галерея всегда находилась посередине экрана. Обычно я использую:

margin: 0 auto;

Однако я не могу использовать это, потому что я не знаю, какова будет ширина контейнера (так как это зависит от размера окна).

Пожалуйста, помогите! Заранее спасибо!

Answer 1

Есть много способов до центра элементов:

Margin путь:

С шириной набора или дисплей: встроенный блок; Вы можете использовать:

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: 80%; 
margin: 0 auto; 

Я предполагаю, что галерея будет иметь ширину% в любом случае в реагирующей сайте.