Como centro horizontalmente um <div> em outro <div>?

votos
3k

Como posso horizontalmente centralizar um <div>dentro de outro <div>usando CSS (se é mesmo possível)?

<div id=outer>  
  <div id=inner>Foo foo</div>
</div>
Publicado 22/09/2008 em 13:27
fonte usuário
Em outras línguas...                            


93 respostas

votos
4k

Você pode aplicar este CSS para o interior <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Claro, você não tem que definir o widthque 50%. Qualquer largura menor do que a que contém <div>funcionará. O margin: 0 autoé o que faz a centralização real.

Se você está direcionando IE8 +, pode ser melhor ter isso em vez disso:

#inner {
  display: table;
  margin: 0 auto;
}

Isso fará com que o centro do elemento interior horizontal e funciona sem definir uma específica width.

Trabalhando exemplo aqui:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Respondeu 22/09/2008 em 13:29
fonte usuário

votos
1k

Se você não quiser definir uma largura fixa no interior divvocê poderia fazer algo parecido com isto:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Isso faz com que o interior divem um elemento interno que pode ser centrada comtext-align .

Respondeu 20/01/2011 em 23:55
fonte usuário

votos
285

As melhores abordagens estão com CSS 3 .

modelo de caixa:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

De acordo com a sua usabilidade você também pode usar as box-orient, box-flex, box-directionpropriedades.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Leia mais sobre centrando os elementos filhos

E isso explica por que o modelo de caixa é a melhor abordagem :

Respondeu 30/08/2012 em 13:05
fonte usuário

votos
211

Suponha que a sua div é 200pxampla:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Certifique-se o elemento pai é posicionado ou seja, relativa, fixo, absoluta, ou pegajoso.

Se você não sabe a largura do seu div, você pode usar transform:translateX(-50%);em vez da margem negativa.

https://jsfiddle.net/gjvfxxdj/

Respondeu 01/12/2011 em 20:52
fonte usuário

votos
193

Eu criei este exemplo para mostrar como verticalmente e horizontalmente align .

Código é basicamente este:

#outer {
  position: relative;
}

e...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

e ele vai ficar no centermesmo quando você re-size sua tela.

Respondeu 11/09/2013 em 12:32
fonte usuário

votos
147

Alguns comentários mencionaram o caminho CSS 3 para centralizar usando display:box.

Esta sintaxe é ultrapassada e não deve ser mais utilizado. [Veja também este post] .

Então, só para ser completo aqui é a mais recente forma de centralizar em CSS 3 usando o Box Módulo layout flexível .

Então se você tem marcação simples como:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... e você deseja centralizar seus itens dentro da caixa, aqui está o que você precisa sobre o elemento pai (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Se você precisa para apoiar os navegadores mais antigos que usam sintaxe mais antiga para flexbox aqui é um bom lugar para olhar.

Respondeu 22/04/2013 em 11:32
fonte usuário

votos
117

Se você não quiser definir uma largura fixa e não querem a margem extra, adicionar display: inline-blockao seu elemento.

Você pode usar:

#element {
    display: table;
    margin: 0 auto;
}
Respondeu 13/05/2012 em 00:45
fonte usuário

votos
72

propriedade box-align do CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
Respondeu 11/03/2012 em 14:37
fonte usuário

votos
71

Ele não pode ser centrado, se você não dar-lhe uma largura, caso contrário ele irá tomar, por padrão todo o espaço horizontal.

Respondeu 22/09/2008 em 13:30
fonte usuário

votos
70

Centrar um div de altura e largura desconhecido

Horizontalmente e verticalmente. Ele funciona com os navegadores razoavelmente moderno (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Mexer com ela mais adiante Codepen ou em JSBin .

Respondeu 17/05/2014 em 19:38
fonte usuário

votos
64

Defina o widthe definir margin-lefte margin-rightpara auto. Isso é apenas horizontal , embora. Se você quiser nos dois sentidos, você só faria as duas coisas. Não tenha medo de experimentar; não é como você vai quebrar nada.

Respondeu 24/07/2009 em 23:00
fonte usuário

votos
48

Eu tive recentemente para centralizar uma div "escondido" (ou seja, display: none;) que tinha uma forma entregue dentro dele que precisava ser centrado na página. Eu escrevi o seguinte jQuery para exibir a div oculta e, em seguida, atualizar o CSS a largura gerado automática da tabela e alterar a margem para centralizá-la. (A alternância de exibição é acionado clicando em um link, mas esse código não foi neccessary para exibir.)

NOTA: Eu estou compartilhando este código porque o Google trouxe-me a esta solução Stack Overflow e tudo teria dado certo, exceto que os elementos ocultos não têm qualquer largura e não podem ser redimensionadas / centrado até depois que eles são exibidos.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Respondeu 23/06/2011 em 22:42
fonte usuário

votos
42

A maneira como eu costumo fazer isso é utilizando a posição absoluta:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

O div exterior não precisa de nenhum propertites extras para que isso funcione.

Respondeu 07/04/2013 em 09:22
fonte usuário

votos
38

Para Firefox e Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Para o Internet Explorer, Firefox e Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

A text-align:propriedade é opcional para navegadores modernos, mas é necessário no Internet Explorer Modo Quirks para suportar navegadores antigos.

Respondeu 31/05/2012 em 16:32
fonte usuário

votos
37

Esta é a minha resposta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Respondeu 19/07/2013 em 11:21
fonte usuário

votos
35

Chris Coyier que escreveu um excelente post sobre 'Centrar no desconhecido' em seu blog. É um ajuntamento de múltiplas soluções. Eu postei um que não é lançado nesta questão. Ele tem mais suporte ao navegador, em seguida, a solução-flexbox, e você não está usando display: table;o que poderia quebrar outras coisas.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
Respondeu 25/10/2013 em 12:53
fonte usuário

votos
34

Outra solução para este sem ter de definir uma largura para um dos elementos está a utilizar o CSS 3 transformatributo.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

O truque é que translateX(-50%)define o #innerelemento de 50 por cento para a esquerda de sua própria largura. Você pode usar o mesmo truque para alinhamento vertical.

Aqui está um violino mostrando alinhamento horizontal e vertical.

Mais informações estão no Mozilla Developer Network .

Respondeu 12/03/2015 em 14:01
fonte usuário

votos
27

Eu percebo que eu sou muito tarde para o jogo, mas esta é uma questão muito popular, e eu encontrei recentemente uma abordagem que eu não vi mencionado em qualquer lugar aqui, então eu percebi que eu documentá-lo.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT: ambos os elementos devem ter a mesma largura para funcionar corretamente.

Respondeu 27/05/2013 em 17:12
fonte usuário

votos
24

Centragem apenas horizontalmente

Na minha experiência, a melhor maneira de centralizar uma caixa horizontal é aplicar as seguintes propriedades:

O recipiente:

  • deveria text-align: center;

A caixa de conteúdo:

  • deveria display: inline-block;

demonstração:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Veja também este violino !


Centrando tanto horizontalmente e verticalmente

Na minha experiência, a melhor maneira de centralizar uma caixa tanto verticalmente e horizontalmente é usar um recipiente adicional e aplicar as seguintes propriedades:

O recipiente exterior:

  • deveria display: table;

O recipiente interno:

  • deveria display: table-cell;
  • deveria vertical-align: middle;
  • deveria text-align: center;

A caixa de conteúdo:

  • deveria display: inline-block;

demonstração:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Veja também este violino !

Respondeu 19/02/2016 em 16:57
fonte usuário

votos
24

Por exemplo, veja este link e o trecho abaixo:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Se você tem um monte de crianças menores de um pai, para que o seu conteúdo CSS deve ser como este exemplo no violino .

O olhar de conteúdo HTML gosta deste:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Então veja este exemplo no violino .

Respondeu 04/12/2013 em 08:30
fonte usuário

votos
23

A maneira mais fácil:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

Respondeu 22/08/2014 em 13:10
fonte usuário

votos
22

Aqui está o que você quer no caminho mais curto.

jsFiddle

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
Respondeu 28/01/2014 em 10:55
fonte usuário

votos
20

Você pode fazer algo como isto

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Isso também vai alinhar o #innerverticalmente. Se você não quiser, retire o displaye vertical-alignpropriedades;

Respondeu 14/10/2013 em 13:09
fonte usuário

votos
18

Este método também funciona muito bem:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Para o interior <div>, a única condição é que a sua heighte widthnão devem ser maiores do que as do seu recipiente.

Respondeu 23/09/2016 em 06:49
fonte usuário

votos
18

Bem, eu consegui encontrar uma solução que talvez vai caber todas as situações, mas usa JavaScript:

Aqui está a estrutura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

E aqui está o trecho JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Se você quiser usá-lo em uma abordagem ágil, você pode adicionar o seguinte:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
Respondeu 11/02/2014 em 16:51
fonte usuário

votos
17

Text-align: center

Aplicando text-align: centeros conteúdos em linha são centrados dentro da caixa de linha. No entanto, desde o div interna tem por padrão width: 100%você tem que definir uma largura específica ou usar um dos seguintes procedimentos:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Margin: 0 auto

Usando margin: 0 autouma outra opção e é mais adequado para a compatibilidade dos navegadores mais antigos. Ele trabalha em conjunto com display: table.

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


flexbox

display: flexcomporta-se como um elemento de bloco e estabelece o seu conteúdo de acordo com o modelo flexbox. Ele funciona com justify-content: center.

Por favor, note: Flexbox é compatível com a maioria dos navegadores, mas não todos. Veja aqui para uma completa e lista atualizada de compatibilidade navegadores.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Transformar

transform: translatepermite modificar o espaço do modelo de formatação visual CSS coordenadas. Usando-o, os elementos podem ser traduzidos, rodado, dimensionado, e inclinada. Para centralizar horizontalmente ele exige position: absolutee left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


<center> (Descontinuada)

O tag <center>é a alternativa HTML para text-align: center. Ele funciona em navegadores mais antigos ea maioria dos novos, mas não é considerado uma boa prática uma vez que este recurso é obsoleto e foi removido dos padrões da Web.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Respondeu 09/06/2017 em 08:34
fonte usuário

votos
15

Experimente brincar com

margin: 0 auto;

Se você deseja centralizar o seu texto demasiado, tente usar:

text-align: center;
Respondeu 05/11/2013 em 16:21
fonte usuário

votos
14

Flex tem cobertura de suporte ao navegador mais de 97% e pode ser a melhor maneira de resolver este tipo de problemas dentro de poucas linhas:

#outer {
  display: flex;
  justify-content: center;
}
Respondeu 03/04/2017 em 20:12
fonte usuário

votos
14

Uma opção existia, que eu encontrei:

Todo mundo diz que a utilização:

margin: auto 0;

Mas não há outra opção. Definir essa propriedade para a div pai. Ele funciona perfeitamente em qualquer momento:

text-align: center;

E veja, centro go criança.

E, finalmente CSS para você:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}
Respondeu 16/11/2013 em 20:56
fonte usuário

votos
11

Se alguém gostaria de uma solução jQuery para o centro alinhar estas divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
Respondeu 20/09/2014 em 08:22
fonte usuário

votos
10

Se a largura do conteúdo é desconhecido você pode usar o seguinte método . Suponha que temos estes dois elementos:

  • .outer -- largura completa
  • .inner - nenhum conjunto largura (mas um máximo de largura poderia ser especificada)

Suponha computado a largura dos elementos são 1000px e 300 pixels, respectivamente. Proceda da seguinte forma:

  1. enrole .innerdentro.center-helper
  2. Faça .center-helperum bloco em linha; torna-se o mesmo tamanho .innertornando-300px de largura.
  3. Empurrar .center-helper50% direito em relação ao seu pai; este coloca a sua esquerda na 500px wrt. exterior.
  4. Empurrar .inner50% à esquerda em relação à sua mãe; este coloca a sua esquerda na wrt -150px. ajudante centro que significa que sua esquerda está em 500-150 = 350px wrt. exterior.
  5. Definir estouro on .outerpara oculto para evitar a barra de rolagem horizontal.

demonstração:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
Respondeu 17/01/2014 em 19:18
fonte usuário

votos
8

Você pode usar display: flexpara o seu div externa e centrar horizontalmente você tem que adicionarjustify-content: center

#outer{
    display: flex;
    justify-content: center;
}

ou você pode visitar w3schools - CSS Flex propriedade para mais idéias.

Respondeu 10/06/2018 em 15:53
fonte usuário

votos
7

CSS 3:

Você pode usar o seguinte estilo no recipiente pai para distribuir os elementos filho uniformemente horizontalmente:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Um bom DEMONSTRA sobre os diferentes valores para justify-content.

Digite descrição da imagem aqui

CanIUse: Navegador-Compatability

Tente!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

Respondeu 11/03/2017 em 14:14
fonte usuário

votos
6

Você pode alcançar isso usando o CSS Flexbox . Você só precisa aplicar 3 propriedades para o elemento pai para ter tudo funcionando.

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

Ter um olhar para o código abaixo isso vai fazer você compreender as propriedades muito melhores.

Conheça mais sobre CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Respondeu 01/11/2016 em 13:41
fonte usuário

votos
6
#inner {
    width: 50%;
    margin: 0 auto;
}
Respondeu 15/05/2015 em 10:26
fonte usuário

votos
5

Coisa agradável eu encontrei recentemente, misturando o uso de line-height+ vertical-aligneo 50%truque esquerda, você pode centeruma caixa de tamanho dinamicamente dentro de outra caixa de tamanho de forma dinâmica, tanto no uso de CSS puro horizontal e vertical.

Note que você deve usar spans (e inline-block), testados em navegadores modernos + IE8. HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Veja o exemplo aqui .

Respondeu 31/10/2013 em 20:56
fonte usuário

votos
4

Eu apliquei estilo inline para div interior. Utilize este.

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
Respondeu 06/06/2013 em 06:30
fonte usuário

votos
3

Usar:

<div id="parent">
  <div class="child"></div>
</div>

Estilo:

#parent {
   display: flex;
   justify-content: center;
}

Se você quiser centralizá-la na horizontal você deve escrever como abaixo:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
Respondeu 27/09/2017 em 13:55
fonte usuário

votos
3

Centro de uma div em uma div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

Respondeu 23/09/2017 em 16:58
fonte usuário

votos
3

Ele também pode ser centrada horizontalmente e verticalmente com o posicionamento absoluto, como este:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
Respondeu 10/05/2017 em 02:56
fonte usuário

votos
3

Você pode usar o flexbox.

#inner {
   display: flex;
   justify-content: center;
}

Você pode aprender mais sobre ele neste link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Respondeu 20/12/2016 em 08:22
fonte usuário

votos
3

Como sobre o CSS abaixo para #innerdiv:

#inner {
  width: 50%;
  margin-left: 25%;
}

Eu, principalmente, usar este CSS para centralizar divs.

Respondeu 01/10/2013 em 19:14
fonte usuário

votos
2

Depois de ler cuidadosamente todas as respostas, aqui é outra maneira de centralizar horizontalmente usando flexbox e sem especificar qualquer largura de recipiente interno. A idéia é usar elementos pseudo que vai empurrar o conteúdo interno da direita e da esquerda.

Usando flex:1no elemento pseudo irá torná-los preencher os espaços restantes e tomar igual tamanho e o recipiente interno vai ficar centrado.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Podemos também considerar a mesma situação para alinhamento vertical simplesmente mudando a direção de flex para coluna:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Respondeu 19/12/2017 em 11:05
fonte usuário

votos
2

Sinto muito, mas esse bebê a partir da década de 1990 apenas trabalhou para mim:

<div id="outer">  
  <center>Foo foo</center>
</div>

Estou indo para o inferno por esse pecado?

Respondeu 22/07/2017 em 06:42
fonte usuário

votos
2

Você pode usar uma linha de código, apenas text-align:center.

Aqui está um exemplo:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

Respondeu 02/06/2017 em 22:38
fonte usuário

votos
2

A maneira mais conhecido que é usado amplamente e trabalhar em muitos navegadores , incluindo os antigos, está usando margincomo abaixo:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Execute o código para ver como ele funciona, também existem 2 coisas importantes que você shoyuldn't esquecer em sua CSS quando você tenta centrar desta forma: margin: 0 auto;que o tornam o centro da div como queria, além de não se esqueça widthda criança, caso contrário, ele não vai ficar centrado como esperado!

Respondeu 20/05/2017 em 10:30
fonte usuário

votos
1

Você pode fazê-lo comprar usando flex-caixa de bruxa é uma boa técnica nos dias de hoje. Para usar flex-box você deve dar display: flex;e align-items: center;para o seu pai ou #outerdiv elemento. O código deve ser assim:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Isso deve centrar o seu filho ou #innerdiv horizontalmente. Mas você não pode realmente ver quaisquer alterações. Porque o nosso #outerdiv não tem altura ou em outras palavras, sua altura é definido para auto para que ele tenha a mesma altura que todos os seus elementos filho. Então, depois de um pouco de estilo visual, o código de resultado deve ser parecido com isto:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Você pode ver #innerdiv está agora centrado. Flex-box é o novo método de elementos de posicionamento em pilhas horizontais ou verticais com CSS e tem 96% de compatibilidade global de navegadores. Então você está livre para usá-lo e se você quiser saber mais sobre o Flex-box visita CSS-Tricks artigo, que é o melhor lugar para aprender usando Flex-box na minha opinião.

Respondeu 10/09/2018 em 23:06
fonte usuário

votos
1

Uma das maneiras mais fáceis que você pode fazer isso é usando display: flex. O div externa só precisa ter exibição flexível, e as necessidades internas margin: 0 autopara torná-lo centralizado horizontalmente.

Para centralizar verticalmente e apenas centralizar uma div dentro de outra div, por favor, olhar para os comentários da classe .inner abaixo

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

Respondeu 07/09/2018 em 21:56
fonte usuário

votos
1

Isto vai certamente centrar sua #innerhorizontalmente e verticalmente. Isso também é compatível em todos os navegadores. Acabei de adicionar estilo extra apenas para mostrar como ele é centrado.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Mas, claro, se você só quer que ele alinhados horizontalmente, isso pode ajudá-lo.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Respondeu 07/09/2018 em 21:55
fonte usuário

votos
1

O melhor que eu usei em meus diversos projetos é

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

ligação fiddle

Respondeu 07/08/2018 em 10:01
fonte usuário

votos
1

Usar:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
Respondeu 18/10/2017 em 09:51
fonte usuário

votos
1

Utilize este código:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
Respondeu 14/10/2017 em 07:09
fonte usuário

votos
1

Eu queria responder a esta como eu notei ninguém mencionou o método calc. O uso é para a div que você está centrando, se você sabe sua largura, vamos dizer que é 1200 pixels, vá para:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Então, basicamente, ele vai adicionar uma margem esquerda de 50% menos metade da largura conhecido.

Respondeu 06/10/2017 em 10:50
fonte usuário

votos
1

Nós poderíamos usar classe do próximo CSS que permitem centro vertical e horizontalmente qualquer elemento contra seu pai:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Respondeu 23/09/2017 em 17:48
fonte usuário

votos
1

Você pode adicionar este código:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Respondeu 04/08/2017 em 15:08
fonte usuário

votos
1

Use o código abaixo.

HTML

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
Respondeu 17/05/2017 em 09:07
fonte usuário

votos
1

Resposta mais fácil adicionar margin: auto; a interior.

<div class="outer">
  <div class="inner">
    Foo foo
  </div>
</div>

código css

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

verificar a minha ligação codepen http://codepen.io/feizel/pen/QdJJrK

digite descrição da imagem aqui

Respondeu 11/02/2017 em 08:11
fonte usuário

votos
1

CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
Respondeu 18/01/2017 em 07:16
fonte usuário

votos
1

É possível usar CSS 3 flexbox . Você tem dois métodos ao usar caixa flex.

  1. Definir o pai display:flex;e adicionar propriedades {justify-content:center; ,align-items:center;}para o seu elemento pai.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Definir o pai display:flexe adicionar margin:auto;para a criança.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Respondeu 13/01/2017 em 12:13
fonte usuário

votos
1

Dê algum widthao interior dive adicionar margin:0 auto;na propriedade CSS.

Respondeu 08/11/2016 em 06:04
fonte usuário

votos
1

Depois de ler todas as respostas Eu não vi o que eu prefiro. Isto é como você pode centralizar um elemento em outro.

jsFiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
Respondeu 09/06/2016 em 20:21
fonte usuário

votos
1

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

Respondeu 08/05/2016 em 04:50
fonte usuário

votos
1

É tão simples.

Basta decidir o que largura que você quer dar a div interna e usar o seguinte CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
Respondeu 28/03/2016 em 09:45
fonte usuário

votos
1

Sim, este é um código curto e limpa para alinhar horizontal. Espero que gostem deste código.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
Respondeu 23/12/2015 em 09:39
fonte usuário

votos
1

Dependendo de suas circunstâncias, a solução mais simples poderia ser:

margin:0 auto; float:none;
Respondeu 20/12/2015 em 21:45
fonte usuário

votos
1
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
Respondeu 14/11/2015 em 12:08
fonte usuário

votos
1

Eu só uso a solução mais simples, mas funciona em todos os navegadores:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
Respondeu 19/09/2014 em 22:26
fonte usuário

votos
0

Eu encontrei semelhante com margin-left, mas pode ser lefttambém.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
Respondeu 29/12/2018 em 21:02
fonte usuário

votos
0

Isso funcionou para mim:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

Neste código, que você seja determinar a largura de elemento.

Respondeu 25/11/2018 em 08:40
fonte usuário

votos
0
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

para coisa normal se você usar div forma estática

se você quiser div para a centrado quando div é absoluta a seu pai aqui é exemplo:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
Respondeu 14/11/2018 em 09:25
fonte usuário

votos
0

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Respondeu 14/08/2018 em 14:49
fonte usuário

votos
0

Isso centraliza o seu div interna horizontalmente e verticalmente:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Por apenas alinhar horizontal, mudança

margin: 0 auto;

e para a vertical, mudança

margin: auto 0;
Respondeu 15/03/2018 em 18:18
fonte usuário

votos
0

Os principais atributos para centrar o div são margin: autoe width:de acordo com requisitos:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
Respondeu 25/01/2018 em 07:09
fonte usuário

votos
0

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Respondeu 25/01/2018 em 06:45
fonte usuário

votos
0

Você pode fazê-lo de uma maneira diferente. Veja os exemplos abaixo:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
Respondeu 02/12/2017 em 05:28
fonte usuário

votos
0

Simplesmente Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Respondeu 20/02/2017 em 13:16
fonte usuário

votos
0

Adicionar CSS para o seu div interior. Definir margin: 0 autoe ajustar a sua largura inferior a 100%, que é a largura da div exterior.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

Isto dará o resultado desejado.

Respondeu 13/01/2017 em 23:10
fonte usuário

votos
0

Adicionar text-align:center;a div pai

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

ou

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Respondeu 30/07/2016 em 11:38
fonte usuário

votos
0

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

Respondeu 03/07/2016 em 13:24
fonte usuário

votos
0

A melhor maneira é usar display de célula da tabela (interna) que vêm exatamente depois de um div com o quadro de display (exterior) e definir align vertical para o div interna (com display-célula de tabela) e cada tag que você usa no div interna colocado no centro da div ou página.

Nota: você deve definir uma altura especificada para exterior

É a melhor maneira que você sabe sem posição relativa ou absoluta, e você pode usá-lo em todos os navegadores como mesmos.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

Respondeu 12/02/2016 em 08:15
fonte usuário

votos
0

Tente esta:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
Respondeu 01/09/2015 em 10:13
fonte usuário

votos
0

Em vez de vários invólucros e / ou margens de automóveis, esta solução simples funciona para mim:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Ele coloca o div no centro da visão (vertical e horizontal), tamanhos e ajusta para o tamanho, imagem de fundo (vertical e horizontal), texto centros (horizontal) centra, e mantém div na vista e em cima do conteúdo. Basta colocar no HTML bodye desfrutar.

Respondeu 15/01/2015 em 14:31
fonte usuário

votos
0

Primeiro de tudo: Você precisa dar uma largura para a segunda div:

Por exemplo:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Note que se você não dar-lhe uma largura, levará toda a largura da linha.

Respondeu 27/09/2014 em 09:29
fonte usuário

votos
0

Tente isto:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
Respondeu 13/08/2014 em 14:20
fonte usuário

votos
0

Eu sei que sou um pouco tarde para responder a esta pergunta, e eu não se preocuparam em ler cada resposta única de modo que este pode ser um duplicado. Aqui é a minha opinião :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
Respondeu 08/03/2014 em 20:19
fonte usuário

votos
-1
<center>

Estou muito bem tratados com o centro mais simples conhecido?

</center>
Respondeu 02/12/2013 em 23:48
fonte usuário

votos
-2

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
    <style>
    .outer{
          text-align: center;
           }
    .inner{
          width: 500px; 
          margin: 0 auto; 
          background: brown; 
          color: red;
    }
 
</style>

  </head>

  <body>

    <div class="outer">
      <div class="inner">This DIV is centered</div>
    </div>

  </body>
</html>

plz tentar isso vai funcionar sem tag centro html

Respondeu 15/07/2018 em 15:00
fonte usuário

votos
-2

Isso também pode funcionar (não usando css):

<div id="outer">  
  <div id="inner" align="center">Foo foo</div>
</div>

Respondeu 22/06/2018 em 01:32
fonte usuário

votos
-2

Você pode usar o link https://plnkr.co/edit/MQD5QHJe5oUVKEvHCz8p?p=preview

.outer{
      display: table;
      width: 100%;
      height: 100%;
}
.inner {
    vertical-align: middle;
}

Consulte https://v4-alpha.getbootstrap.com/examples/cover/

Respondeu 26/07/2017 em 09:29
fonte usuário

votos
-2
<div id="outer" style="width:100%">  
  <div id="inner" style="text-align:center">Foo foo</div>
</div>
Respondeu 31/01/2017 em 07:45
fonte usuário

votos
-2

Eu estou compartilhando esta resposta para os designers que querem alinhar o seu conteúdo tanto horizontalmente quanto verticalmente. Ou você pode dizer no centro da página web. Por favor, vá a este site para baixar o arquivo.

Código CSS

.ver-hor-div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
Respondeu 30/12/2015 em 19:43
fonte usuário

votos
-4
.outer {
    text-align: center;
    width: 100%
}
Respondeu 09/12/2016 em 11:13
fonte usuário

votos
-7

Centrando: de largura Auto Margens

Esta caixa é centrado horizontalmente, definindo seus direito e esquerdo larguras de margem para "Auto". Esta é a forma preferida de realizar a centragem horizontal com CSS e funciona muito bem na maioria dos navegadores com suporte a CSS 2. Infelizmente, Internet Explorer 5 / Windows não responder a este método - uma lacuna que o navegador, não a técnica.

Existe uma solução simples. (A pausa enquanto você luta para trás a náusea induzida por essa palavra.) Pronto? Internet Explorer 5 / Windows aplica incorretamente o CSS "text-align" atribuir a nível de bloco elementos. Declarando "text-align: center" para a contendo elemento nível de bloco (muitas vezes o elemento BODY) centraliza horizontalmente a caixa no Internet Explorer 5 / Windows.

Há um efeito colateral dessa solução alternativa: o atributo CSS "text-align" é herdada, centrando conteúdo em linha. Muitas vezes, é necessário definir explicitamente o atributo "text-align" para a caixa centrado, neutralizando os efeitos do Internet Explorer 5 / Windows solução alternativa. O CSS relevante segue.

body {
    margin: 50px 0px;
    padding: 0px;
    text-align: center;
}

#Content {
    width: 500px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #EEE;
}

http://bluerobot.com/web/css/center1.html

Respondeu 14/03/2013 em 16:00
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more