html - aligning multiple items in center for all devices

Question

I am trying to align the items in the center of the screen horizontally and vertically. However, it doesn't work without specifying width and height so that creates a problem for mobile and desktop view. How do I make it responsive so that it looks to be in the center of the screen in every kind of devices?

.parent-container{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

<div class="parent-container">
    <button>
    </button>
    <button>
    </button>
    <button>
    </button>
  </div>

Answer 1

You can set a min-height. When the content ist larger than the device's height, the .parent-container goes beyond.

.parent-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100vw;
      min-height: 100vh;
    }