How to centre flex with css - Html

LJ3
March 15, 2023
226 views
3 votes
4 Answers

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:

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>

Answers

- DivijSehgal
- March 15, 2023 at 6:48 pm
- 0 votes
0
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.

- PandaDEV
- March 15, 2023 at 6:59 pm
- 0 votes
0
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.

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to centre flex with css – Html

Answers