Button at the center and bottom of div

Question

How to make a button be at the bottom of div and at the center of it at the same time?

Answer 1

You can use align-items: flex-end like so:

html,
body {
  height: 100%;
}

.flex-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  width: 200px;
  height: 200px;
  background: #0088cc;
  display: flex;
  align-items: flex-end;
}

.btn-bot {
  margin: 0 auto;
  display: block;
}

  

    Bottom button