Align a button to bottom side in div

Align a button to bottom side in div.markdown

Align a button to bottom side in div

A Pen by TOBY on CodePen.

License.

index.html

<div class="big-box">
  <div class="wrap-vertical-center">
    <button class="btn">Center Button</button>
  </div>
</div>

style.css

/* もっとも外側のdiv */
.big-box {
  /* 外側は relative の必要あり */
  position: relative;     
  width: 100%;
  height: 300px;
  
  border: 4px dotted pink;   /* for debug */
}

/* wrapper の div */
.wrap-vertical-center {
  position: absolute;
  width: 100%;
  bottom: 15%;      /* 下から基準に配置する */
  
  border: 4px dotted gray;  /* for debug */
}

/* ボタンの調整 */
.wrap-vertical-center button {
  display: block;
  margin: 0 auto;  /* 横で中心に寄せる */
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />