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>
Alineación izquierda y derecha, usar position
Uno de los métodos para alinear elementos es utilizar la propiedad position: absolute de la siguiente manera.
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 AÑ
.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>