如何在頁面中心獲得引導按鈕？

Question

我希望我的按鈕在頁面中間對齊，但使用我的代碼時不起作用。

我的代碼：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
} 

Answer 1

嘗試margin: 0 auto改變;

Answer 2

HTML：

<div> 
    <button> 
     Hello 
    </button> 
</div> 

CSS：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
} 

div { 
text-align: center; 
} 

Answer 3

你應該使用在自定義CSS自舉類時，你可以。

父母上使用.text-center。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center"> 
 
    <button>button</button> 
 
</div>

或者，如果你不想這樣做，只需添加.center-block（或display: block）的按鈕。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <button class="center-block">button</button>

Answer 4

您可以使用Flexbox的使其居中。

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