How to center grid of 4 divs?

Question

I have 4 divs but want to center them (horizontally and vertically).

Not much to say here, apparently this is quite easy but I am new to CSS and don't really know what I'm doing. Code so far:

<!DOCTYPE html>
<html>
<head>
 <title>Test</title>
 <style>
 body {
 }
 div {
  background-color:#308DD4;
  opacity:0.8;
  color:white;
  width:200px; /* Change to 200 ish */
  height:auto;
  line-height:150px;
  margin:5px;
  font-size:36pt;
  font-family:sans-serif;
  text-align:center;
  float:left;
 }
 a {
  display:none;
  line-height:35pt;
  color:white;
  text-decoration:none;
  font-size:20pt;
 }
 div:hover a {
  display:block;
 }
 </style>
</head>
<body>
 <div>
  Test 1
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
 </div>
 <div style="background-color:#ff34b3">
  Test 2
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
 </div>
 <div style="clear:both;background-color:#9344bb">
  Test 3
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
 </div>
 <div style="background-color:#8dd430">
  Test 4
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
  <a href="http://www.example.com">Test</a>
 </div>
</body>
</html>

ALSO BY THE WAY:

Does anyone know how to do this? I am trying to copy it as much as I can, but again I don't really know what I'm doing...

Thanks, Itechmatrix

Put them all in a wrapping div and center **that** using : http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page?rq=1 — Paulie_D, Aug 14 '15 at 09:27
But the problem is that it is no easy way of centering content on a site vertically. — Johan Brännmar, Aug 14 '15 at 09:29
i tried that Paulie_D but he has to put different class on 4 div as he applied css on div which will apply..means total changes in code. — Leo the lion, Aug 14 '15 at 09:30
Then perhaps we need a better representation of your ***actual*** code. If your actual structure restricts some answers then you're wasting our time if the answer can't be used. — Paulie_D, Aug 14 '15 at 09:46

score 0 · Answer 1 · answered Aug 14 '15 at 09:34

If i got your point then go with this code :

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    body {
    }
    .inner {
        background-color:#308DD4;
        opacity:0.8;
        color:white;
        width:24%; /* Change to 200 ish */
        height:auto;
        line-height:150px;
        margin:5px;
        font-size:36pt;
        font-family:sans-serif;
        text-align:center;
        float:left;
    }
    a {
        display:none;
        line-height:35pt;
        color:white;
        text-decoration:none;
        font-size:20pt;
    }
    .inner:hover a {
        display:block;
    }
    </style>
</head>
<body>
    <div style="width:80%;margin-left:auto;margin-right:auto;">
        <div class="inner">
            Test 1
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#ff34b3" class="inner">
            Test 2
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#9344bb" class="inner">
            Test 3
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#8dd430" class="inner">
            Test 4
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

by this your div will be in center..please check and let me know if you still face any issue..ty

Hey, Sorry fell asleep. Your code seemed to not print out my expected result - to be clear i would like to retain the solid structure of 4 divs - without changing margin between them - but place all 4 divs to the horizontal/vertical centre of the page. — user24492, Aug 14 '15 at 23:49
ohh so you want 2 div in top 2 bottom like in your example but that 4 div should be in middle of scrren from top and from right? like in center in screen? — Leo the lion, Aug 15 '15 at 06:49

How to center grid of 4 divs?

1 Answers1