html5 - horizontally - Centro simple un objeto con CSS y sin cortes

div html

Question

Quiero centrar un objeto usando CSS y sin hacks, ¿es posible y cómo?

He intentado esto, pero mi etiqueta p se ha ido.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}

Answer 1

HTML:

<div>Centered</div>

CSS:

div {
    margin: 0 auto;
    width: 200px;
}

Ejemplo en vivo: http://jsfiddle.net/v3WL5/

Tenga en cuenta que margin: 0 auto; solo tendrá un efecto si el div tiene un ancho.

Answer 2

Hay varias formas de centrar un elemento. Pero depende de cuál sea tu elemento y cómo elegimos mostrarlo:

• Si tiene {display:inline; } {display:inline; }

  Esto es simple. Solo puede usar "text-align: center;" centrar texto, imágenes y divs.

• Si tiene {display:block;}

  Esto es un poco mas dificil Depende de cómo esté posicionado su objeto. Su objeto puede ser relativo, absoluto o fijo.

  • Si es relativo; entonces puedes usar "margin:0 auto;" Sin embargo, requerirá un valor de ancho.

  • Si está absolutamente posicionado, debe especificar sus valores "top:" e "left:" . También necesitarás un ancho. Si conoce el ancho del elemento, la mejor manera es usar {left:50%; margin-left:-X} {left:50%; margin-left:-X} , donde X = 1/2 del ancho del elemento.

Answer 3

Use esto para propósitos generales. Incluso span o div que está dentro de lo que sea:

width:inherit; display:block;margin:0 auto;

Answer 4

Uso:

1. Uso en línea: el contenido va aquí ....

2. Código CSS:

   #text-align { text-align:center }

Código HTML :

<div id="text-align">Content goes here....</div>

http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

Answer 5

si no necesita estar en la posición: fijo; solo puedes usar

<center>
Hello
</center>

Esto está en desuso en HTML5

Answer 6

margin: auto uso margin: auto como este:

margin: 0px auto