Saya mempunyai masalah ketika saya mencoba untuk memusatkan "produk" blok div karena saya tidak tahu sebelumnya lebar div. Adakah yang punya solusi?

Pembaruan: Masalah yang saya miliki adalah saya tidak tahu berapa banyak produk yang akan saya tampilkan, saya dapat memiliki 1, 2 atau 3 produk, saya dapat memusatkan mereka jika itu nomor yang tetap karena saya tahu lebar induknya div, saya hanya tidak tahu bagaimana melakukannya ketika kontennya dinamis.

.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>

Pembaruan 27 Feb 2015: Jawaban orisinal saya terus dipilih, tetapi sekarang saya biasanya menggunakan pendekatan @ bobince.

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

Pos asli saya untuk tujuan historis:

Anda mungkin ingin mencoba pendekatan ini.

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

Inilah gaya yang cocok:

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

JSFiddle

Idenya di sini adalah bahwa Anda mengandung konten yang ingin Anda pusatkan dalam dua div, yang luar dan yang dalam. Anda mengapung kedua div sehingga lebarnya secara otomatis menyusut agar sesuai dengan konten Anda. Selanjutnya, Anda relatif memposisikan div luar dengan tepi kanan di tengah wadah. Terakhir, Anda relatif memposisikan div dalam arah yang berlawanan dengan setengah dari lebar sendiri (sebenarnya lebar div luar, tetapi mereka sama). Pada akhirnya itu memusatkan konten dalam wadah apa pun yang ada di dalamnya.

Anda mungkin memerlukan div kosong itu di akhir jika Anda bergantung pada konten "produk" Anda untuk mengukur ketinggian "product_container".

Elemen dengan 'display: block' (seperti div secara default) memiliki lebar yang ditentukan oleh lebar wadahnya. Anda tidak dapat membuat lebar blok bergantung pada lebar isinya (shrink-to-fit).

(Kecuali untuk blok yang 'mengambang: kiri / kanan' di CSS 2.1, tapi itu tidak berguna untuk pemusatan.)

Anda bisa mengatur properti 'display' ke 'inline-block' untuk mengubah blok menjadi objek shrink-to-fit yang dapat dikontrol oleh properti text-align orang tuanya, tetapi dukungan browser tidak tepat. Sebagian besar Anda bisa lolos dengan menggunakan peretasan (mis. Lihat -moz-inline-stack) jika Anda ingin melakukannya.

Cara lain untuk pergi adalah tabel. Ini bisa diperlukan ketika Anda memiliki kolom yang lebarnya benar-benar tidak dapat diketahui sebelumnya. Saya benar-benar tidak tahu apa yang Anda coba lakukan dari kode contoh - tidak ada yang jelas di sana yang perlu blok menyusut-agar-cocok - tetapi daftar produk mungkin dapat dianggap tabular.

[PS. jangan pernah menggunakan 'pt' untuk ukuran font di web. 'px' lebih dapat diandalkan jika Anda benar-benar membutuhkan teks ukuran tetap, jika tidak, unit relatif seperti '%' lebih baik. Dan "jelas: ccc keduanya" - salah ketik?]

.center{
   text-align:center; 
}

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

JSFiddle

Sebagian besar browser mendukung display: table;aturan CSS. Ini adalah trik yang baik untuk memusatkan div dalam wadah tanpa menambahkan HTML tambahan atau menerapkan gaya pembatas ke wadah (sepertitext-align: center; yang akan memusatkan semua konten inline lainnya dalam wadah), sambil menjaga lebar dinamis untuk div yang terkandung:

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>

Pembaruan (2015-03-09):

Cara yang tepat untuk melakukan ini hari ini sebenarnya adalah dengan menggunakan aturan flexbox. Dukungan browser sedikit lebih terbatas ( dukungan tabel CSS vs dukungan flexbox ) tetapi metode ini juga memungkinkan banyak hal lain, dan merupakan aturan CSS khusus untuk jenis perilaku ini:

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>

enam cara untuk menguliti kucing itu:

Tombol satu: tipe apa pun display: blockakan menganggap lebar orang tua penuh. (kecuali jika dikombinasikan dengan floatatau display: flexorang tua). Benar. Contoh buruk

Tombol 2: pergi untuk display: inline-blockakan mengarah ke lebar otomatis (bukan penuh). Anda kemudian dapat memusatkan menggunakan text-align: center pada blok pembungkus . Mungkin yang paling mudah, dan paling kompatibel secara luas, bahkan dengan browser 'vintage' ...

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

Tombol 3: Tidak perlu meletakkan apa pun di bungkus. Jadi mungkin ini adalah solusi paling elegan. Juga berfungsi secara vertikal. (Dukungan browser untuk transtlate cukup baik (≥IE9) hari ini ...).

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

Btw: Juga cara yang bagus untuk blok pemusatan vertikal yang ketinggiannya tidak diketahui (sehubungan dengan penentuan posisi absolut).

Tombol 4: Penentuan posisi absolut. Pastikan untuk menyimpan cukup tinggi di bungkusnya, karena tidak ada orang lain yang mau (tidak ada perbaikan jelas maupun implisit ...)

.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

Tombol 5: float (yang juga membawa elemen level blok ke lebar dinamis) dan pergeseran relatif. Meskipun saya belum pernah melihat ini di alam liar. Mungkin ada kerugiannya ...

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

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

Pembaruan: Tombol 6: Dan saat ini, Anda juga dapat menggunakan kotak fleksibel. Perhatikan, gaya itu berlaku untuk pembungkus objek yang berada di tengah.

.wrapSix
  display: flex
  justify-content: center

→ kode sumber lengkap (sintaks stylus)

Saya menemukan solusi yang lebih elegan, menggabungkan "inline-block" untuk menghindari penggunaan float dan hacky clear: keduanya. Masih membutuhkan div bersarang tho, yang tidak semantik tetapi hanya berfungsi ...

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

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

Semoga ini bisa membantu!

<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;
}

Jika elemen target benar-benar diposisikan, Anda dapat memusatkannya dengan menggerakkannya 50% dalam satu arah ( left: 50%) dan kemudian mengubahnya 50% dalam arah oposisi ( transform:translateX(-50%)). Ini berfungsi tanpa menentukan lebar elemen target (atau dengan width:auto). Posisi elemen induk bisa statis, absolut, relatif, atau tetap.

Secara default, divelemen ditampilkan sebagai elemen blok, sehingga lebarnya 100%, menjadikannya tidak berarti di tengah. Seperti yang disarankan oleh Arief, Anda harus menentukan widthdan kemudian dapat Anda gunakan autosaat menentukan marginuntuk memusatkan a div.

Atau, Anda juga bisa memaksa display: inline, tetapi kemudian Anda akan memiliki sesuatu yang berperilaku seperti spanbukan div, jadi itu tidak masuk akal.

Ini akan memusatkan elemen seperti Daftar Pesanan, atau Daftar Tanpa Urutan, atau elemen apa pun. Bungkus saja dengan Div dengan kelas outerElement dan berikan elemen inner kelas innerElement.

Akun outerelement untuk IE, Mozilla lama, dan sebagian besar browser yang lebih baru.

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

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

gunakan css3 flexbox dengan justify-content: center;

    <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;
}

Sedikit variasi pada jawaban Mike M. Lin

Jika Anda menambahkan overflow: auto;(atau hidden) ke div.product_container, maka Anda tidak perlu div.clear.

Ini berasal dari artikel ini -> http://www.quirksmode.org/css/clearing.html

Berikut ini HTML yang dimodifikasi:

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

Dan di sini adalah CSS yang dimodifikasi:

.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;
}

Alasannya, mengapa lebih baik tanpa div.clear(selain itu terasa salah untuk memiliki elemen kosong) adalah tugas margin Firefox terlalu bersemangat.

Misalnya, jika Anda memiliki html ini:

<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>

kemudian, di Firefox (8,0 pada titik penulisan), Anda akan melihat 11pxmargin sebelumnya product_container . Yang lebih buruk, adalah Anda akan mendapatkan bilah gulir vertikal untuk seluruh halaman, bahkan jika kontennya cocok dengan dimensi layar.

Coba css dan markup baru ini

Berikut ini HTML yang dimodifikasi:

<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>

Dan di sini adalah CSS yang dimodifikasi:

<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;
}

Jika Anda tidak memberikan "overflow: hidden" for ".product_container" div "luar-tengah" akan tumpang tindih dengan konten terdekat lainnya di sebelah kanannya. Tautan atau tombol apa pun di sebelah kanan "luar-tengah" tidak akan berfungsi. Coba warna latar belakang untuk "luar-tengah" untuk memahami kebutuhan "overflow: tersembunyi"

Saya menemukan solusi yang menarik, saya membuat slider dan harus memusatkan kontrol slide dan saya melakukan ini dan berfungsi dengan baik. Anda juga dapat menambahkan posisi relatif ke orang tua dan memindahkan posisi anak vertikal. Lihatlah 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>

Lakukan display:table;dan atur marginkeauto

Sedikit kode penting:

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

Tidak peduli berapa banyak elemen yang Anda dapatkan sekarang, itu akan otomatis menyelaraskan di tengah

Contoh dalam cuplikan kode:

.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>

Saya takut satu-satunya cara untuk melakukan ini tanpa secara eksplisit menentukan lebarnya adalah dengan menggunakan tabel (terkesiap).

Memperbaiki yang buruk, tetapi tidak berhasil ...

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>

Perbaikan sederhana yang bekerja di browser lama (tetapi menggunakan tabel, dan membutuhkan ketinggian yang harus ditetapkan):

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

}

gunakan span istead dari divs bagian dalam

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

Saya tahu pertanyaan ini sudah lama, tetapi saya tidak menghiraukannya. Sangat mirip dengan jawaban bobince tetapi dengan contoh kode kerja.

Jadikan setiap produk sebagai blok-inline. Tengahkan isi wadah. Selesai

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>

Lihat juga: Center inline-blok dengan lebar dinamis di CSS

Ini adalah salah satu cara untuk memusatkan sesuatu di dalam div yang tidak mengetahui lebar bagian dalam elemen.

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

solusi saya adalah:

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

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

tambahkan css ini ke kelas product_container Anda

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