Como centralizar um botão dentro de uma div?


220

Eu tenho uma div que é largura é 100%.

Gostaria de centralizar um botão dentro dele, como posso fazer isso?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>


qual é o código que você está usando para o botão?
David Nguyen

2
Suspeito que ele queira centralizar vertical e horizontalmente. Até agora, nenhuma das soluções conseguiu isso. CSS não é muito bom em centralização vertical = (.
mrtsherman

deixe-me dizer que o flexbox torna essa resposta inútil para 2014. sim, baby!
Foreyez #

Respostas:


352

Resposta atualizada

Atualizando porque notei que é uma resposta ativa, no entanto, o Flexbox seria a abordagem correta agora.

Demonstração ao vivo

Alinhamento vertical e horizontal.

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

Apenas horizontal (contanto que o eixo flexível principal seja horizontal, o padrão)

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

Resposta original usando uma largura fixa e sem flexbox

Se o pôster original desejar alinhamento vertical e central, é bastante fácil para largura e altura fixas do botão, tente o seguinte

Demonstração ao vivo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

apenas para alinhamento horizontal, use

button{
    margin: 0 auto;
}

ou

div{
    text-align:center;
}

21
-1 isso é horrível. Basicamente, você define a largura para 100% e a margem para -50. Mas isso causa outros problemas, como o botão sobe acima do elemento que o contém e não funciona bem com o redimensionamento.
CodyBugstein

3
Ei, obrigado por pelo menos explicar o seu voto negativo @Imray, observe também que eu disse largura e altura fixas , não variáveis. Portanto, o redimensionamento não é um fator. "Basicamente", defino a largura como 100px , não 100%, e a margem como -50px, que é metade. Este tem sido um método bastante padrão para centralizar. Estou ansioso para sua resposta embora :)
Loktar

1
Suas boas-vindas (desculpe pela dureza, que bom que você tem senso de humor) eu quis dizer 100px. Eu não sabia que você escreveu "consertado", mas ainda acho que essa resposta não será boa na maioria das situações
CodyBugstein

109

Você poderia apenas fazer:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

Ou você pode fazer assim:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

O primeiro irá alinhar tudo dentro da div. O outro centralizará o alinhamento apenas o botão.


28

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Atualização : se o OP estiver procurando pelo centro horizontal e vertical, esta resposta o fará para um elemento fixo de largura / altura.


11
você também pode precisar de "display: block;"
precisa saber é o seguinte

1
@SoluableNonagon That's it! "display: block" faz o truque com "margin: 0 auto"
Tomas Lukac 6/01

8

Margem: 0 automático; é a resposta correta apenas para centralização horizontal. Para centralizar as duas maneiras, algo como isso funcionará, usando jquery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Atualizar ... cinco anos depois , era possível usar o flexbox no elemento DIV pai para centralizar facilmente o botão na horizontal e na vertical.

Incluindo todos os prefixos do navegador, para melhor suporte

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}


2
jQuery? Seriamente?
Pranesh Ravi # 22/16

3
@PraneshRavi - em 2011, não havia muitas opções disponíveis no CSS para centralizar algo verticalmente, então sim, o javascript não era incomum se você não soubesse a altura e a largura exatas de um elemento e pudesse subtrair as margens.
adeneo 22/09/16

Você sempre pode usar o flex para centralizar um elemento na vertical e na horizontal.
Pranesh Ravi # 22/16

6
@PraneshRavi - sim, você pode, o flexbox é uma ótima resposta para essa pergunta, e vou acrescentar isso, mas em 2011 não havia flexbox.
adeneo 22/09/16

@JGallardo - Acho que você perdeu a parte em que as outras respostas estão tentando centralizar o botão não apenas horizontalmente, mas também verticalmente, e que há 9 anos atrás não havia realmente boas opções para fazer isso apenas com CSS
adeneo


7

Usando flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

E então adicionando a classe ao seu botão.

<button class="Center">Demo</button> 

6

Aqui você deve simplificar:

primeiro você tem a posição inicial do seu texto ou botão:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

Adicionando essa linha de código css à tag h2 ou à tag div que contém a tag button

estilo: "alinhamento de texto: centro;"

Finalmente, o código do resultado será:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

insira a descrição da imagem aqui


bem-vindo irmão
nadir hamidou 04/02


2

Para centralizar uma <button type = "button">vertical e horizontalmente dentro de uma <div>largura que seja computada dinamicamente como no seu caso, é isso que fazer:

  1. Defina text-align: center;para o empacotamento <div>: isso centralizará o botão sempre que você redimensionar a <div>(ou melhor, a janela)
  2. Para o alinhamento vertical, você precisará definir margin: valuepx;o botão. Esta é a regra sobre como calcular valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Aqui está uma demonstração do JS Bin .


2

A resposta super simples que se aplicará à maioria dos casos é definir a margem 0 autoe a exibição como block. Você pode ver como eu centralizei meu botão na minha demo no CodePen

insira a descrição da imagem aqui


1

O mais fácil é inseri-lo como um "div", dar-lhe uma "margem: 0 auto", mas se você quiser que ele seja centralizado, você precisa dar uma largura

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

1

Opção CSS responsiva para centralizar um botão na vertical e na horizontal sem se preocupar com o tamanho do elemento pai (usando ganchos de atributo de dados para esclarecer questões de separação e separação) :

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/


1

Maneira responsiva de centralizar seu botão em uma div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

1
Esta resposta poderia ser melhorado através da remoção de estilos inline e mostrando uma demo
JGallardo

1

Supondo que div seja #div e button seja #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Em seguida, aninhe o botão em div, como de costume.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.