aligning multiple items in center for all devices

user_14435094 0
Viewed 62

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>

css html
2 Answers

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;
    }
user_83827730

you need to remove margin from html and body

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

html,body{
margin:0;

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

user_43989660
Related