Button won't center even though align-items: center is used in CSS for div

Question

I have this div:

<div className="cert-footer">
    <Button
        type="submit"
        primary={true}
        fullWidth={false}
    >
        Confirm
    </Button>
</div> 

My CSS for this is:

.cert-footer {
    padding-bottom: 20px;
    align-items: center;
}

The button will not center. Instead it displays to the left but the bottom padding of 20px is visible. What am I doing wrong?

Answer 1

add this CSS to your code

.cert-footer {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

  <div class="cert-footer">
      <Button
          type="submit"
          primary={true}
          fullWidth={false}>
          Confirm
      </Button>
  </div>

Answer 2

Firstly I think it's worth adding display: flex; or display: grid; to your .cert-footer, probably the former in this case. Fairly sure align-items does not work unless the element is flex or grid.

Secondly are you trying to vertical or horizontal align? align-items works vertically, justify-content and justify-items work horizontally by default.