div 너비를 미리 알지 못하기 때문에 div 블록 "제품"을 가운데에 배치하려고 할 때 문제가 있습니다. 아무도 해결책이 있습니까?

업데이트 : 내가 가진 문제는 내가 표시 할 제품 수를 모르고, 1, 2 또는 3 개의 제품을 가질 수 있으며, 부모의 너비를 알고있을 때 고정 번호 인 경우 센터링 할 수 있다는 것입니다 div, 나는 내용이 역동적 일 때 어떻게 해야할지 모르겠다.

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}

<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

2015 년 2 월 27 일 업데이트 : 원래 답변이 계속 투표권을 얻었지만 이제는 일반적으로 @bobince의 접근 방식을 사용합니다.

.child { /* This is the item to center... */
  display: inline-block;
}
.parent { /* ...and this is its parent container. */
  text-align: center;
}

역사적 목적을위한 나의 원래 게시물 :

이 방법을 시도 할 수 있습니다.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div class="clear"/>
</div>

일치하는 스타일은 다음과 같습니다.

.outer-center {
    float: right;
    right: 50%;
    position: relative;
}
.inner-center {
    float: right;
    right: -50%;
    position: relative;
}
.clear {
    clear: both;
}

JSFiddle

여기서 아이디어는 두 개의 div, 가운데 하나와 안쪽 하나에 중심을 두려는 내용을 포함한다는 것입니다. 두 div를 플로팅하여 너비가 내용에 맞게 자동으로 줄어 듭니다. 다음으로 외부 div를 컨테이너 중앙의 오른쪽 가장자리에 상대적으로 배치하십시오. 마지막으로, 내부 div를 반대 방향으로 자신의 너비의 절반만큼 배치합니다 (실제로는 외부 div의 너비이지만 동일합니다). 궁극적으로 콘텐츠가 들어있는 컨테이너의 중심에 있습니다.

"product_container"의 높이를 조정하기 위해 "product"컨텐츠에 의존하는 경우 끝에 빈 div 가 필요할 수 있습니다 .

'디스플레이 : 블록'이있는 요소 (기본적으로 div)는 컨테이너 너비에 따라 너비가 결정됩니다. 내용의 너비 (수축에 맞게)에 따라 블록의 너비를 만들 수 없습니다.

CSS 2.1에서 'float : left / right'블록을 제외하고 센터링에는 사용되지 않습니다.

'display'속성을 'inline-block'으로 설정하여 블록을 부모의 text-align 속성으로 제어 할 수있는 열 박음 (shrink-to-fit) 객체로 전환 할 수 있지만 브라우저 지원은 드물다. 그런 식으로 가고 싶다면 대부분 해킹을 사용하여 벗어날 수 있습니다 (예 : -moz-inline-stack 참조).

다른 방법은 테이블입니다. 너비를 미리 알 수없는 열이있는 경우에 필요할 수 있습니다. 필자는 예제 코드에서 수행하려는 작업을 실제로 알 수는 없습니다. 여기 에는 축소 블록 이 필요한 명확한 항목은 없지만 제품 목록은 테이블 형식으로 간주 될 수 있습니다.

[추신. 웹에서 글꼴 크기에 'pt'를 사용하지 마십시오. 고정 크기 텍스트가 실제로 필요한 경우 'px'가 더 안정적입니다. 그렇지 않으면 '%'와 같은 상대 단위가 더 좋습니다. 그리고“clear : ccc both”– 오타?]

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

대부분의 브라우저는 display: table;CSS 규칙을 지원합니다 . 이것은 포함 text-align: center;된 div의 동적 너비를 유지하면서 HTML을 추가하거나 컨테이너에 제한 스타일을 적용하지 않고 컨테이너에 div를 중앙에 배치하는 좋은 방법입니다 .

HTML :

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS :

.centered { display: table; margin: 0 auto; }

.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

업데이트 (2015-03-09) :

오늘날이를위한 올바른 방법은 실제로 flexbox 규칙을 사용하는 것입니다. 브라우저 지원은 조금 더 제한적 이지만 ( CSS 테이블 지원 vs flexbox 지원 )이 방법은 다른 많은 것들을 허용하며 이러한 유형의 동작에 대한 전용 CSS 규칙입니다.

HTML :

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS :

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}

<div class="container">
  <div class="centered">This content is centered</div>
</div>

그 고양이를 껍질을 벗기는 여섯 가지 방법 :

버튼 1 : 모든 유형의 display: block부모는 전체 부모 너비를 가정합니다. ( float또는 display: flex부모 와 함께 사용하지 않는 한 ). 진실. 나쁜 예입니다.

버튼 2 : 계속 진행 display: inline-block하면 전체 너비가 아닌 자동 너비가됩니다. 그런 다음 text-align: center 줄 바꿈 블록을 사용하여 가운데에 맞출 수 있습니다 . 아마도 '빈티지'브라우저에서도 가장 쉽고 가장 광범위하게 호환됩니다 ...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

버튼 3 : 랩에 아무것도 넣을 필요가 없습니다. 아마도 이것이 가장 우아한 해결책 일 것입니다. 세로로도 작동합니다. (요즘 번역에 대한 브라우저 지원은 충분합니다 (≥IE9) ...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw : 높이가 알려지지 않은 블록을 수직으로 중앙에 배치하는 좋은 방법입니다 (절대 위치 지정과 관련하여).

버튼 4 : 절대 위치. 래퍼에 충분한 높이를 예약하십시오.

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

버튼 5 : float (블록 수준 요소를 동적 너비로 가져옴) 및 상대적 이동. 나는 야생에서 이것을 본 적이 없지만 . 아마도 단점이 있습니다 ...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

업데이트 : 버튼 6 : 요즘에는 flex-box를 사용할 수도 있습니다. 스타일은 중심 객체의 래퍼에 적용됩니다.

.wrapSix
  display: flex
  justify-content: center

→ 전체 소스 코드 (스타일러스 구문)

float과 hacky clear : both를 사용하지 않기 위해 "인라인 블록"을 결합한보다 우아한 솔루션을 찾았습니다. 여전히 중첩 된 div가 필요합니다. 매우 의미가 없지만 작동합니다 ...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

그것이 도움이되기를 바랍니다!

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

대상 요소가 절대적으로 배치 된 경우 한 방향으로 50 % 이동 left: 50%한 다음 반대 방향으로 50 % 변형하여 중심을 맞출 수 있습니다 ( transform:translateX(-50%)). 이것은 대상 요소의 너비를 정의하지 않고 (또는로 width:auto) 작동합니다. 부모 요소의 위치는 정적, 절대적, 상대적 또는 고정적 일 수 있습니다.

기본적으로 div요소는 블록 요소로 표시되므로 너비가 100 %이므로 가운데에 의미가 없습니다. Arief가 제안한대로 a를 지정해야하며 a 를 가운데 에 맞추기 위해 지정할 때 width사용할 수 있습니다 .automargindiv

또는을 강제로 수행 할 수도 display: inline있지만 span대신 div.

정렬 된 목록 또는 정렬되지 않은 목록과 같은 요소 또는 모든 요소를 ​​가운데에 배치합니다. outerElement 클래스로 Div로 감싸고 inner 요소에 innerElement 클래스를 지정하십시오.

외부 요소 클래스는 IE, 이전 Mozilla 및 최신 브라우저를 설명합니다.

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

justify-content : center와 함께 css3 flexbox를 사용하십시오.

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}

Mike M. Lin의 답변 에 약간의 변형

에 overflow: auto;(또는 hidden)를 추가 div.product_container하면 필요하지 않습니다 div.clear.

이것은이 기사에서 파생됩니다-> http://www.quirksmode.org/css/clearing.html

다음은 수정 된 HTML입니다.

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

그리고 여기 CSS가 수정되었습니다 :

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

div.clear비어있는 요소가있는 것이 잘못되었다고 생각 하지 않는 것이 더 좋은 이유 는 Firefox의 과도한 마진 할당 때문입니다.

예를 들어 다음과 같은 HTML이있는 경우 :

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

그런 다음 Firefox (작성 시점에서 8.0)에서 앞에11px margin 이 표시됩니다 . 더 나쁜 것은 내용이 화면 크기에 잘 맞아도 전체 페이지에 대해 세로 스크롤 막대가 표시된다는 것입니다. product_container

이 새로운 CSS와 마크 업을 사용해보십시오

다음은 수정 된 HTML입니다.

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

그리고 여기 CSS가 수정되었습니다 :

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

".product_container"에 "overflow : hidden"을 제공하지 않으면 "outer-center"div가 오른쪽의 다른 주변 내용과 겹칩니다. "외부 센터"오른쪽에있는 링크 나 버튼은 작동하지 않습니다. "overflow : hidden"의 필요성을 이해하기 위해 "outer-center"의 배경색을 사용하십시오

흥미로운 해결책을 찾았고 슬라이더를 만들고 슬라이드 컨트롤을 중앙에 배치해야 했으며이 작업을 수행하고 제대로 작동했습니다. 부모에 상대적인 위치를 추가하고 자식 위치를 세로로 이동할 수도 있습니다. 살펴보십시오 http://jsfiddle.net/bergb/6DvJz/

CSS :

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML :

<div id="parent">
    <div id="child">voila</div>
</div>

수행 display:table;및 설정 margin에auto

중요한 코드 비트 :

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

지금 얼마나 많은 요소를 가져 왔어도 중앙에 자동 정렬됩니다.

코드 스 니펫의 예 :

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}

<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

너비를 명시 적으로 지정하지 않고이 작업을 수행 할 수있는 유일한 방법은 테이블을 사용하는 것입니다.

Crappy는 수정했지만 작동합니다 ...

CSS :

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML :

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

기존 브라우저에서 작동하는 간단한 수정 (테이블을 사용하지만 높이를 설정해야 함) :

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

내부 div 대신 범위를 사용하십시오.

<div class="container_box">
   <span class="content">Hello</span>
</div>

나는이 질문이 오래되었다는 것을 알고 있지만 금이 가고있다. bobince의 답변과 매우 유사하지만 작동 코드 예제가 있습니다.

각 제품을 인라인 블록으로 만듭니다. 용기의 내용물을 중앙에 놓습니다. 끝난.

http://jsfiddle.net/rgbk/6Z2Re/

<style>
.products{
    text-align:center;
}

.product{
    display:inline-block;
    text-align:left;

    background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
    background-size:25px;
    padding-left:25px;
    background-position:0 50%;
    background-repeat:no-repeat;
}

.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}
</style>


<div class="products">
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
    <div class="product">
        <div class="price">R$ 0,01</div>
    </div>
</div>

CSS에서 동적 너비를 가진 중심 인라인 블록 참조

이것은 요소의 내부 너비를 모르는 div 내에서 중심을 맞추는 한 가지 방법입니다.

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

내 해결책은 다음과 같습니다.

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}

이 CSS를 product_container 클래스에 추가하십시오.

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;