Responsive landing page using media queries

Community feedback

• 

  Benjamin B.•240

  @benjaminbilgehanPosted over 1 year ago

  To center a div using Flexbox, you can use the "display", "justify-content", and "align-items" properties. Here's an example:

  <div class="container">
    <div class="box">This box will be centered.</div>
  </div>
  

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .box {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
  

  In this example, we create a container div with the "display" property set to "flex". We also set the "justify-content" and "align-items" properties to "center". This centers the child element (the "box" div) both horizontally and vertically within the container.

  The "height: 100vh" property is added to the container to ensure that the container takes up the full height of the viewport. You can adjust the height to fit your needs.

  The "box" div has a fixed width and height, and a background color to make it visible. You can replace this with your own content or styling.

  I hope this helps! Let me know if you have any more questions.

  Marked as helpful

  0
• 

  George Manimbo•180

  @GeorgenicoPosted over 1 year ago

  Try giving the body a height: 100vh, display: flex, align-items: center, justify-content: center,

  It would center the element on the screen. Hope this helps you!

  Marked as helpful

  0