Centrar y ajustar imagen en div

[OuisVN]

Hola amigos de Forosdelweb.
Tengo un pequeño inconveniente... Como verán, necesito centrar unas imgs en un div pero no consigo hacerlo funcionar y peor todavia es que hay imágenes que son demasiado grandes y si se llegan a centrar posiblemente se vean menos de lo que se ven ahora... La cuestión es esa. ¿Cómo podría centrar todas esas imágenes y que a la vez se vean dentro del div?

Aquí los códigos y las imágenes.


CSS:

Código:

.saleItem,
.saleItem h2,
.saleItem ul {
}

.saleItem {
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats legacy IE */
	max-width:20em;
	background:#DADADA url(Images/Principal/Background.png);
	padding:0.33em;
	border:1px solid #C0C0C0;
	-webkit-border-radius:1em;
	border-radius:1em;	
	margin:10px 0px 5px 10px;
	float:left;	
	width:304px;
	height:110px;
}
.saleItem div {
	float:left;
	width:100;
	margin-right:-100%;
}

.saleItem h2,
.saleItem ul {
	margin:0;
	padding:0; 
	font:bold 100%/150% arial,helvetica,sans-serif;
	background:#FFF;
	border:1px solid #C0C0C0;
	-webkit-border-radius:0.67em;
	border-radius:0.67em;
}

.saleItem h2 {
	position:relative; /* depth sort over img */
	float:left;
	padding:0.25em 0.5em;
	margin-right:-100%; /* remove from flow without removing from flow */
	color:#777; /* do NOT go lighter than this, WCAG minimum */
}

.saleItem img {
	display:block;
	margin-left:4em;
}

.saleItem ul {
	list-style:none;
	padding:0 0.25em;
	float:right;
}

.saleItem li {
	padding:0.25em;
	border-top:1px solid #E0E0E0;
}

.saleItem li:before {
	content:"";
	position:relative;
	top:-0.1em; /* compensate for no descenders on numbers */
	display:inline-block;
	vertical-align:middle;
	width:16px;
	height:16px;
	margin-right:0.33em;
}

.saleItem li:first-child {
	border:0;
}

.saleItem li.duckets {
	color:#C1D;
}

.saleItem li.diamantes {
	color:#189; /* do NOT go lighter than this, WCAG minimum */
}

.saleItem li.duckets:before {
	background-image:url(Images/Principal/Duckets.gif);
}

.saleItem li.diamantes:before {
	background:url(Images/Principal/Diamonds.gif);
}

PHP(En este no pasaré todo el código porque no es necesario, solo pondré lo que se necesita editar).

Código:

<!--- Conexión --->
					<?php
					include('Conexion.php');

					try {
						$db = new PDO(
						'mysql:host=' . $host . ';dbname=' . $db,
						$user,
						$pw
						);
					} catch (PDOException $e) {
						die('Connection failed: ' . $e->getMessage());
					}

					$stmt = $db->query('SELECT * FROM catalog_adm_rares');
					
					while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) echo '
					
					<div class="saleItem">
						<div>
						<h2>', $row['nombre'], '</h2>
						<img
							src="', $row['link'], '"
							alt="', $row['nombre'], '"
							class="plate"
						>
						</div>
						<ul>
							<li class="duckets">', $row['duckets'], '</li>
							<li class="diamantes">', $row['diamantes'], '</li>
						</ul>
					<!-- .saleItem --></div>';
					?>

Como podrán ver, esta diseñado con mysql para que las imágenes sean fáciles de agregar, el problema es el que notifico anteriormente. Pido encarecidamente que me puedan ayudar. Desde ya, muchas gracias :)

[Rafael]

El código php no importa mucho. Concéntrate en el html generado.

Cosa rara pero la misma w3c trae unos tips: https://www.w3.org/Style/Examples/007/center.en.html

En general la mejor manera que he encontrado (Y adaptado):

Código CSS:

.Contenedor {position: relative;}
 
.Contenedor>img {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;}
 

Y puedes además ponerle:

Código CSS:

max-width: 100%;
max-height: 100%;
 

Para que no se desborden las imágenes.

[OuisVN]

El codigo es bueno, el problema es que las imágenes tienen distintos tamaños... Así que no sabría bien al momento de centrar si quedará bien en algunas y en otras mal.
El codigo segundo lo agregue pero las imágenes dejaron de visualizarse, no entiendo la razón.

Yo antes tenía un código que me ayudaba a solucionar esto, el problema es que ya no lo manejo porque todo lo hago en mysql. No sabría pasarlo a mysql ya que contiene un montón de código innecesario.

Código:

<div id="bleftsmall" style="background:url(http://i.imgur.com/OC25b0X.png);">
<div class="content monosub">
<div style="float:left;background:url(URL) no-repeat 50px;width:290px;height:132px;font-family:Ubuntu;font-weight:400;font-size:16px;color:#939393;position:relative;">
<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid silver;padding:6px;position:absolute;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background-color: rgba(255,255,255,0.80);"><b>NOMBRE CUALQUIERA</b></div>
<div class="infobox radius" style="top:0px;right:0px;">
<div style="float:left;color:silver;font-family:Ubuntu;font-size:14px;"></div><div style="float:left;color:#4CAC27;font-family:Ubuntu;font-size:14px;margin:0px 2px; 0px 2px;"><div style="float:right;padding-left:21px;background:url(http://i.imgur.com/0YlbPMd.png) no-repeat;">999999</div></div><div style="clear:both;"></div><hr><div style="float:left;color:#FF8000;font-family:Ubuntu;font-size:14px;margin:0px 2px; 0px 2px;"><div style="float:right;padding-left:22px;background:url(http://i.imgur.com/mK8zcjv.png) no-repeat;">999999</div></div></div>
<div style="position:absolute;bottom:5px;right:0px;"></div>
</div>
</div>
</div>

Ese sería el php. El css es todavía más desordenado.

Código:

#bleftsmall{-moz-border-radius:5px;border-radius:5px;background-color:#FFF;float:left;margin:10px 0px 5px 10px;width:304px;height:autopx;border:1px solid silver;}
.monosub{padding:5px 3px 5px 6px;}