skip to Main Content

I am trying to centre display: flex; and having no luck up to now. I have tried multiple things, among others:

justify-content: center;    
align-items: center;

The issue I am having is no matter what I change it to, the divs stay to the left of the screen. I will add a screenshot of this below:

HTML PIC

Probably something I am doing wrong so any help would be much appreciated. If I can use something else apposed to Flex then I am happy to change this to something else if that is recommended. I just need the divs to be displayed centred at the top of the screen.

Here is my code:

body {
  background-color: #ffffff;
  min-height: 120vh;
  height: 100%;
  margin: 0;
  max-width: 120vh;
  overflow: hidden;
}

.grid-container {
  display: flex;
  align-items: center;
  margin: 0;
  flex-direction: row;
  height: 440px;
  width: fit-content;
  max-width: 880px;
  flex-wrap: nowrap;
  gap: 10px;
}

.grid-container-2 {
  display: flex;
  align-items: center;
  margin: 0;
  flex-direction: row;
  height: 440px;
  width: fit-content;
  max-width: 880px;
  flex-wrap: nowrap;
  gap: 10px;
}

.Divheaders {
  color: #ffffff;
  padding: 3px;
  border: 3px solid #000000;
}

.divONE {
  background-color: #ffffff3b;
  height: 650px;
  width: 650px;
  max-width: 50%;
  max-height: 50%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  /* align-items: relative; */
  /* width: auto;
        height: auto;
        margin-left: auto;
        margin: 0px auto; */
  /* width: 325px; */
  padding: 3px;
  border: 3px inset #000000;
  border-radius: 3px;
  outline-style: solid;
}

.DIVpic {
  max-width: 75%;
  max-height: 75%;
  margin: 0px;
  position: absolute;
  top: 60%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* width: auto;
        height: auto;
        margin: 0px auto; */
  /* width: 315px; */
  /* position: absolute; */
  float: none;
}
<div class="grid-container">
  <div class="divONE">
    <h2 class="Divheaders">MR11</h2>
    <a href="https:///calendar.html">
      <img class="DIVpic" src="{% static 'images/MeetingPic.jpg' %}" alt="MR11 Meeting room link"></a>
  </div>

  <div class="divONE">
    <h2 class="Divheaders">MR12</h2>
    <a href="https:///calendar.html">
      <img class="DIVpic" src="{% static 'images/MeetingPic5.jpg' %}" alt="MR12 Meeting room link"></a>
  </div>

  <div class="divONE">
    <h2 class="Divheaders">MR13</h2>
    <a href="https:///calendar.html">
      <img class="DIVpic" src="{% static 'images/MeetingPic2.jpg' %}" alt="MR13 Meeting room link"></a>
  </div>
</div>

<div class="grid-container-2">
  <div class="divONE">
    <h2 class="Divheaders">MR14</h2>
    <a href="https:///calendar.html">
      <img class="DIVpic" src="{% static 'images/MeetingPic3.jpg' %}" alt="MR14 Meeting room link"></a>
  </div>

  <div class="divONE">
    <h2 class="Divheaders">MRNEW</h2>
    <a href="">
      <img class="DIVpic" src="{% static 'images/MeetingPic4.jpg' %}" alt="MR15 Meeting room link"></a>
  </div>

  <div class="divONE">
    <h2 class="Divheaders">MR15</h2>
    <a href="https:///calendar.html">
      <img class="DIVpic" src="{% static 'images/MeetingPic1.jpg' %}" alt="MR15 Meeting room 
    
        link"></a>
  </div>
</div>

4

Answers


  1. Not sure if this might help, but try adding this in body. This will center all your divs

    margin: 0 auto;
    

    Or you can make the body element as flex to center the child elements

    Login or Signup to reply.
  2. You could use

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
    

    but remember that centers your div in absolute, so if you want to have a dynamic width and height it wont work anymore.

    Login or Signup to reply.
  3. You don`t need to put another row in different div with class grid-container-2. To achieve what you want you need to set parent wrap container to width: 100%. Add to grid-container flex-direction: row; and flex-wrap: warp; (the shortcut for this is flex-flow: [flex-direction] [flex-wrap]). To make every child stay same size you need to style DivONE by flex-basis: 33%, flex-shrink: 1, flex-grow: 1. The shortcut for this is flex: [flex-grow] [flex-shrink] [flex-basis];

    Notice I set wrap height to 100vh. It`s mean that the height of the wrap will be 100% of the available window space.

    Hope this helps!

    .wrap {
      width: 100%;
      height: 100vh;
    }
    
    .grid-container {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      max-width: 1024px;
      height: 100%;
      margin: 0 auto;
    }
    
    .divONE {
      box-sizing: border-box;
      flex: 1 1 33.33333%;
      text-align: center;
      padding: 2rem;
    }
    <div class="wrap">
      <div class="grid-container">
        <div class="divONE">
          <h2 class="Divheaders">MR11</h2>
          <a href="https:///calendar.html">
            <img class="DIVpic" src="{% static 'images/MeetingPic.jpg' %}" alt="MR11 Meeting room link" />
          </a>
        </div>
    
        <div class="divONE">
          <h2 class="Divheaders">MR12</h2>
          <a href="https:///calendar.html">
            <img class="DIVpic" src="{% static 'images/MeetingPic5.jpg' %}" alt="MR12 Meeting room link" />
          </a>
        </div>
    
        <div class="divONE">
          <h2 class="Divheaders">MR13</h2>
          <a href="https:///calendar.html">
            <img class="DIVpic" src="{% static 'images/MeetingPic2.jpg' %}" alt="MR13 Meeting room link" />
          </a>
        </div>
    
        <div class="divONE">
          <h2 class="Divheaders">MR14</h2>
          <a href="https:///calendar.html">
            <img class="DIVpic" src="{% static 'images/MeetingPic3.jpg' %}" alt="MR14 Meeting room link" />
          </a>
        </div>
    
        <div class="divONE">
          <h2 class="Divheaders">MRNEW</h2>
          <a href="">
            <img class="DIVpic" src="{% static 'images/MeetingPic4.jpg' %}" alt="MR15 Meeting room link" />
          </a>
        </div>
    
        <div class="divONE">
          <h2 class="Divheaders">MR15</h2>
          <a href="https:///calendar.html">
            <img class="DIVpic" src="{% static 'images/MeetingPic1.jpg' %}" alt="MR15 Meeting room link" />
          </a>
        </div>
      </div>
    </div>
    Login or Signup to reply.
  4. You can try display: grid with its align-content and justify-content.

    .container {
      width: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: repeat(3, 200px);
      align-content: space-around;
      justify-content: space-between;
      background: gray;
    }
    
    .one {
      text-align: center;
      padding: 2rem;
      background: yellow;
    }
    
    body {
      margin: 0;
    }
    <div class="container">
      <div class="one">
        <h2 class="Divheaders">MR11</h2>
        <a href="https:///calendar.html">
          <img class="DIVpic" src="{% static 'images/MeetingPic.jpg' %}" alt="MR11 Meeting room link" />
        </a>
      </div>
    
      <div class="one">
        <h2 class="Divheaders">MR12</h2>
        <a href="https:///calendar.html">
          <img class="DIVpic" src="{% static 'images/MeetingPic5.jpg' %}" alt="MR12 Meeting room link" />
        </a>
      </div>
    
      <div class="one">
        <h2 class="Divheaders">MR13</h2>
        <a href="https:///calendar.html">
          <img class="DIVpic" src="{% static 'images/MeetingPic2.jpg' %}" alt="MR13 Meeting room link" />
        </a>
      </div>
    
      <div class="one">
        <h2 class="Divheaders">MR14</h2>
        <a href="https:///calendar.html">
          <img class="DIVpic" src="{% static 'images/MeetingPic3.jpg' %}" alt="MR14 Meeting room link" />
        </a>
      </div>
    
      <div class="one">
        <h2 class="Divheaders">MRNEW</h2>
        <a href="">
          <img class="DIVpic" src="{% static 'images/MeetingPic4.jpg' %}" alt="MR15 Meeting room link" />
        </a>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search