将按钮放在 div 的中心答案

【问题标题】：putting button at center of div将按钮放在 div 的中心
【发布时间】：2017-07-15 17:26:53
【问题描述】：

我想在 div 的中心放置一个按钮（垂直和水平）。

这里：CSS: center element within a <div> element

批准的答案说此代码：

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

会实现这一点。应用此代码，按钮是垂直输入的，而不是水平输入的。相反，它位于 div 的右边缘。

我的html代码是这样的：

<div class="col-md-1" id="button_div"></div>

按钮动态创建如下：

closeButton = document.createElement("BUTTON");
var text = document.createTextNode("remove");
closeButton.className = "btn btn-danger";
closeButton.setAttribute("style", "margin: auto;");

closeButton.appendChild(text);                                      

$("#button_div").append(closeButton);

我怎样才能使按钮水平居中？

【问题讨论】：

标签： css flexbox alignment

【解决方案1】：

似乎工作正常。按钮不需要margin:auto。

closeButton = document.createElement("BUTTON");
var text = document.createTextNode("remove");
closeButton.className = "btn btn-danger";
/* closeButton.setAttribute("style", "margin: auto;"); */

closeButton.appendChild(text);                                      

$("#button_div").append(closeButton);

#button_div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-1" id="button_div"></div>

【讨论】：

【解决方案2】：

检查下面的sn-p。它的工作。

  

  closeButton = document.createElement("BUTTON");
    var text = document.createTextNode("remove");
    closeButton.className = "btn btn-danger";
    /* closeButton.setAttribute("style", "margin: auto;"); */

    closeButton.appendChild(text);                                      

    $("#button_div").append(closeButton);

   

 #button_div  {
                    display:-webkit-flex;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align:center /*add this*/
            
                }
             .btn{
                  display:inline-block
                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-1" id="button_div">

</div>

  #button_div  {
            display:-webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align:center /*add this*/

        }
     .btn{
          display:inline-block
        }

【讨论】：