Como alinhar um ao meio (horizontalmente/largura) da página [duplicado
Pergunta
Esta pergunta já tem uma resposta aqui:
- Como centrar horizontalmente umu003Cdiv> ? 101 respostas
eu tenho um div
etiqueta com width
definido como 800 pixels. Quando a largura do navegador é maior que 800 pixels, não deve esticar o div
, mas deve trazê -lo para o meio da página.
Solução
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Outras dicas
position: absolute
e depois top:50%
e left:50%
coloca a borda superior no centro vertical da tela, e a borda esquerda no centro horizontal e depois adicionando margin-top
para o negativo da altura da div, ou seja, -100 muda acima de 100 e da mesma forma margin-left
. Isso recebe o div
exatamente no centro da página.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}
<div id="outPopUp"></div>
Moderno Flexbox Solução é o caminho a seguir/a partir de 2015. justify-content: center
é usado para o elemento pai para alinhar o conteúdo ao centro dele.
Html
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Resultado
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
background: #5F85DB;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="center">Centered div with left aligned text.</div>
</div>
Você quer dizer que deseja centralizá -lo vertical ou horizontalmente? Você disse que especificou o
height
a 800 pixels, e queria que a div não estique quando owidth
foi maior que isso ...Para centralizar horizontalmente, você pode usar o
margin: auto;
atributo no CSS. Além disso, você terá que garantir que obody
ehtml
Os elementos não têm nenhuma margem ou preenchimento:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Para fazê -lo também funcionar corretamente no Internet Explorer 6, você deve fazê -lo da seguinte forma:
Html
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Você também pode usá -lo assim:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Basta usar o center
tag logo após o body
etiqueta e termine o center
Tag pouco antes body
Ends:
<body>
<center>
... Your code here ...
</center>
</body>
Isso funcionou para mim com todos os navegadores que tentei.
Isso pode ser facilmente alcançado via contêiner Flex.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Adicione esta aula à div que você deseja centralizada (que deve ter uma largura definida):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Ou adicione o material da margem à sua classe Div, assim:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Div centralizado vertical e horizontalmente dentro do pai sem fixar o tamanho do conteúdo
Aqui nesta página é uma boa visão geral com várias soluções, muito código para compartilhar aqui, mas mostra o que é possível ...
Pessoalmente eu gosto esta solução Com a famosa transformação traduzida -50% mais truque. Funciona bem para altura e largura fixa (% ou px) e indefinidas do seu elemento.
O código é tão simples quanto:
Html:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Aqui um violino Isso mostra que funciona
Use o Propriedade do CSS Flex: http://jsfiddle.net/cytr/j7sea/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
Algumas outras configurações pré-existentes de código mais antigo que impedirão a Div Page centralizando L&R:
- Outras classes escondidas em links de folha de estilo externos.
- Outras classes incorporadas em algo como um
img
(Como para controles mais antigos de formato de impressão CSS externos). - O código da legenda com IDs e/ou classes entrará em conflito com um nomeado
div
classe.
Centralizando sem especificar a largura da div:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Isso é algo como <center>
TAG faz, exceto:
- Todos os elementos diretos em linha em linha (por exemplo.
<h1>
) do<center>
também estará posicionado para o centro - o elemento em linha em linha pode ter tamanho diferente (comapred para
display:block
configuração) de acordo com os padrões do navegador
Usar justify-content
e align-items
para alinhar horizontal e verticalmente um div
https://developer.mozilla.org/de/docs/web/css/justify-content https://developer.mozilla.org/en/docs/web/css/align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Se você tem algum conteúdo regular, e não apenas uma linha de texto, a única razão possível que eu conheço é calcular a margem.
Aqui está um exemplo:
Html
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
Então, #supercontainer
é seu "whole page"
e os seus width
é 1200px
.
#middlecontainer
é div
com o conteúdo do seu site; Está width
102px
. No caso de width
de conteúdo é conhecido, você precisa dividir o tamanho da página para 2 e subtrair metade do conteúdo width
Do resultado: 1200/2 - (102 /2) = 549;
Sim, também estou vendo que isso é Der Grosse falha do CSS.
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
"Largura: 100%" para a etiqueta "Body" é apenas para um exemplo. Em um projeto real, você pode remover esta propriedade.
Simples http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
Use o código abaixo para centralizar a caixa div:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}
<div class="box-content">
</div>
Isso também funciona no Internet Explorer, mas as margens automáticas não.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
<parent>
<child>
</child>
</parent>
parent {
position: relative
}
child {
position: absolute,
left: 50%,
transform: translateX(-50%)
}
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
Se você deseja alterar a posição vertical, altere o valor de 250 e poderá organizar o conteúdo de acordo com sua necessidade. Não há necessidade de dar a largura e outros parâmetros.
Se o conteúdo do seu centro estiver no fundo de outras divs, apenas a margem poderá salvá -lo. Nada mais. Eu sempre o enfrento quando não uso uma estrutura como Bootstrap.
No meu caso, o tamanho da tela do telefone é desconhecido e aqui está o que eu fiz.
Html
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript (antes que você precise mostrar este div)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
Por alguma razão, nenhuma das respostas anteriores funcionou para mim realmente. É isso que funcionou para mim e funciona também nos navegadores:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
- Obtenha a largura da tela.
- Em seguida, faça margem deixada 25%
- Faça a margem certa 25%
Dessa maneira, o conteúdo do seu contêiner ficará no meio.
Exemplo: suponha que a largura do contêiner = 800px;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}
.middle {
margin:0 auto;
text-align: center;
}
/ * traz div para o centro */