TEXTAREA中底端居中一個button

實現這樣一個效果：

HTML結構：

<div class="am-modal-bd">
    <div class="am-form-group">
        <textarea id="reply-con" maxlength="1500"></textarea>
        <div>
            <button id="save-reply" class="am-btn am-btn-default am-btn-sm">儲存</button>
        </div>
    </div>
</div>
 

實現步驟：

1.按鈕居中使用純CSS編寫的話，需要知道按鈕的寬度，但是按鈕中的文字會動態改變按鈕寬度。實現起來不太好做。

解決方法：使用flex佈局，在按鈕外套一層div，div中使用flex佈局：

<div>
    <button id="save-reply" class="am-btn am-btn-default am-btn-sm">儲存</button>
</div>

div樣式：

div {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
}
 

top: 100% 是為了讓按鈕位於TEXTAREA底部。

2.去除TEXTAREA邊框樣式，選中樣式，陰影效果：

#rep-con {
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
 

div中居中一個button

需要實現的效果：

HTML結構：

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

同樣的可以採用flex佈局：

// 水平垂直居中
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 僅水平居中
#wrapper {
  display: flex;
  justify-content: center;
}

如果按鈕是固定寬度，可以不使用flex佈局：

// 水平垂直居中
button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

// 僅水平居中
button{
    margin: 0 auto;
}

// 或者 僅水平居中
div{
    text-align:center;
}