Para centrar horizontalmente un bloque de elementos (como un <div>), se utiliza la propiedad margin: auto. Establecer el ancho del elemento evitará que se extienda hasta los bordes de su contenedor. Entonces, el elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los dos márgenes:
Centrar texto horizontalmente
Para centrar texto de manera horizontal utilizamos la propiedad text-align: center, como muestra el siguiente ejm.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>Este texto está centrado.</p>
</div>
</body>
</html>
Centrar una imagen
Para centrar una imagen, establece el margen izquierdo y derecho en automático y conviértelo en un elemento de bloque.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>
Para centrar una imagen, configura los márgenes izquierdo y derecho en
automático, y convierte la imagen en un elemento de bloque.
</p>
<img src="sutilweb.jpg" alt="Paris" style="width: 40%" />
</body>
</html>
Alineamiento utilizando float
Otro método que se suele utilizar es utilizar la propiedad float, de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73ad21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Alinear a la derecha con float</h2>
<p>
Este es un ejm de cómo podemos alinear en este caso a la derecha con la
propiedad float
</p>
<div class="right">
<p>
In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since.
</p>
</div>
</body>
</html>
El truco clearfix
Nota: si un elemento es más alto que el elemento que lo contiene y flota, se desbordará fuera de su contenedor. Puedes usar el «truco clearfix» para arreglar esto (mira el siguiente ejm).
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4caf50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Sin Clearfix</h2>
<p>
Esta imagen está flotando a la derecha. También es más alto que el
elemento que lo contiene, por lo que se desborda fuera de su contenedor:
</p>
<div>
<img
class="img1"
src="pineapple.jpg"
alt="Pineapple"
width="170"
height="170"
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet...
</div>
<h2 style="clear: right">Con Clearfix</h2>
<p>
Agregue el truco clearfix al elemento contenedor para solucionar este
problema:
</p>
<div class="clearfix">
<img
class="img2"
src="pineapple.jpg"
alt="Pineapple"
width="170"
height="170"
/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
imperdiet...
</div>
</body>
</html>
Centrar verticalmente usando padding
Hay muchas formas de centrar un elemento verticalmente en CSS. Una solución simple es usar padding superior e inferior, de la siguiente manera:
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Centrar verticalmente con padding</h2>
<p>
En este ejemplo, usamos la propiedad padding para centrar el elemento div
verticalmente:
</p>
<div class="center">
<p>Estoy centrado verticalmente.</p>
</div>
</body>
</html>
Para centrar también horizontalmente utilizamos la propiedad text-align: center, de la siguiente manera:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
.center {
width: 360px;
padding: 140px0;
border: 3px solid blue;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<h1>Centrar verticalmente con padding</h1>
<p>En este ejm centraremos verticalmente utilizando la propiedad padding</p>
<div class="center">
<p>Estoy centrado verticalmente.</p>
</div>
</body>
</html>
Centrar verticalmente utilizando line-height
Otro truco es usar la propiedad line-height con un valor que sea igual a la propiedad height. Veamos un ejm.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* SI SE UTILIZAN MÚLTIPLES LÍNEAS */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Center with line-height</h2>
<p>
En este ejemplo, usamos la propiedad line-height con un valor que es igual
a la propiedad de altura para centrar el elemento div:
</p>
<div class="center">
<p>Centrado tanto horizontal como verticalmente con line-height.</p>
</div>
</body>
</html>
Centrar verticalmente utilizando position y transform
Si padding y line-height no son opciones, otra solución es usar position y transform de la siguiente manera.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<p>
En este ejemplo, usamos posicionamiento y la propiedad transform para
centrar vertical y horizontalmente el elemento div:
</p>
<div class="center">
<p>Estoy horizontal y verticalmente posicionado.</p>
</div>
</body>
</html>
Centrar verticalmente utilizando Fletbox
También puedes usar flexbox para centrar las cosas. Solo ten en cuenta que flexbox no es compatible con IE10 y versiones anteriores.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<p>
Un contenedor con justify-content y align-items las propiedades
establecidas en <em>center</em> alinearán los elementos en el centro (en
ambos ejes).
</p>
<div class="center">
<p>Estoy centrado horizontal y verticalmente.</p>
</div>
</body>
</html>