Cómo puedo hacer para centrar una caja DIV (tanto en laptop como de forma responsive)

[Hildergarn]

Hola a todos. En esta página web que estoy construyendo deseo centrar la siguiente caja con la información del ebook a vender, pero estoy teniendo ciertos problemitas en conseguirlo.



Abajo el código CSS que utilizo para dicho DIV.

Código:

#containerebook1 
{
	float:left;
	margin-bottom: 10px;
	width:100%;
	position:relative;
	right:50%;
}

#colebook2 
{
    float: left;
    width: 46%;
    background-color: #f3f3f3;
    border: 1px dashed #ccc;
    position: relative;
    left: 56%;
    overflow: hidden;
    text-align:center !important; 
    padding:10px 0 !important;
}

@media (max-width: 998px) {

#containerebook1 {right:0 !important;}

#colebook2 {width:100% !important; left:0% !important;}

#colebook2 {margin-top: 20px !important;}

}

Les agradezco cualquier ayuda de antemano.

[Rafael]

Usar floats es mala idea.

La primer opción es convertir ese div a inline-block y asignar text-align: center al padre.
Está sencillito.

https://jsfiddle.net/ys0jtjy3/

Código HTML:

<div class="contenedor">
  <div class="rojo">
  Hola
  </div>
</div>
 

Código CSS:

.contenedor {text-align: center;}
 
.contenedor>div {display: inline-block;}
 
.rojo {background-color: red; width: 200px; height:100px;}
 

La segunda opción es que investigues acerca del flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


----
Aparte de eso unos comentarios. No puede ser que requieras veinte important! eso indica que no estás controlando tu css, sino que simplemente estás parchando los atributos.

Otra cosa. No estás separando qué parte es importante del comportamiento de tus objetos, y cual parte es solamente estética. No es de que sea indispensable, pero, otra vez, indica un poco de orden al elaborar el código.