Mobile-first solution using CSS flexbox

Community feedback

• 

  Dennar David•80

  @DennardavidPosted about 1 year ago

  To do the vertical and horizontal alignment you can use flex box set the body to a height of 100vh and align items center and justify content center this would do the trick e.g of the code

  body {
     display: flex;
     Justify content: center;
     align items: center;
     height:100vh;
  }
  

  Marked as helpful

  0
• 

  Dennar David•80

  @DennardavidPosted about 1 year ago

  On the mobile view there is an initial margin this can be removed by setting the root margin to 0 like this

  * {
      Margin:0;
     }
  

  Marked as helpful

  0

  ---

  

  P

  Abhishek Baliyan•110

  @abhishek-baliyan-devPosted about 1 year ago

  @Dennardavid Thanks. I didn't know about this.

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 1 year ago

  @abhishek-baliyan-dev Hello, regarding your question :

  Yes, when aligning an element both vertically and horizontally, using a height value is essential. This is because height defines the reference point for the centering process. Without a height, there wouldn't be a clear reference point for the center alignment, making it more challenging to achieve the desired layout.

  Marked as helpful

  1