¿Cómo centro contenido en un div usando CSS?

¿Cómo centro el contenido en un div horizontal y verticalmente?¿Cómo centro contenido en un div usando CSS?

2010-12-07 Thomas

Thomas ver esto también http://www.vdotmedia.com/ demo/css-vertical-center.html – kobe

Pregunta: "¿Cómo centro el contenido de un div, vertical y horizontalmente?" – nycynik

Para una alineación horizontal quizás esto ayude: http://www.w3schools.com/css/css_align.asp – Manfred

Esto debe adaptarse a sus necesidades. Es un truco de transición CSS-2D. Recientemente me he encontrado con la siguiente solución:

* { 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
*:after, 
 
*:before { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
*:after { 
 
    clear: both; 
 
} 
 

 
.title { 
 
    font-family: Georgia; 
 
    font-size: 36px; 
 
    line-height: 1.25; 
 
    margin-top: 0; 
 
} 
 

 
.blocks { 
 
    position: relative; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    width: 200px; 
 
    height: 200px; 
 
    font-weight: bold; 
 
    color: #FFFFFF; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.block:first-child { 
 
    background-color: green; 
 
} 
 

 
.block:nth-child(2) { 
 
    background-color: red; 
 
} 
 

 
.block:nth-child(3) { 
 
    background-color: blue; 
 
} 
 

 
.h-center { 
 
    text-align: center; 
 
} 
 

 
.v-center span { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
}

<h1 class="title">3 Boxes with different text-align settings.</h1> 
 
<div class="blocks"> 
 
    <div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div> 
 
    <div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div> 
 
    <div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div> 
 
</div>

Nota: Esto también funciona con: después y: antes de pseudo-elementos.

También puede leer aquí: css-tricks.com

puede probarlo aquí: jsfiddle

Fuente

2015-02-13 19:59:08

Para alinear horizontalmente que es bastante sencillo:

<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
.bodyclass #container { 
    width: ???px; /*SET your width here*/ 
    margin: 0 auto; 
    text-align: left; 
} 
</style> 
<body class="bodyclass "> 
<div id="container">type your content here</div> 
</body>

y para alinear vertical, que es un poco complicado: aquí está la source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Universal vertical center with CSS</title> 
    <style> 
    .greenBorder {border: 1px solid green;} /* just borders to see it */ 
    </style> 
</head> 

<body> 
    <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Fuente

2010-12-07 08:34:30 AnD

quiero que el contenido en el div se centre horizontal y verticalmente. no centro div en la página. – Thomas

con todo el css de ajuste. si es posible, se envuelve con una mesa con la altura y anchura que 100% y td configurarlo para align vertical al medio, texto-align para centrar

Fuente

2016-01-10 14:45:58

¿Cómo centro contenido en un div usando CSS?

Respuesta

Cuestiones relacionadas