How to center a table in the screen html?

June 24, 2022

I have this table with some data

I want it to be it in the center of the screen. How do I do that in CSS? I have tried margin: 2px auto; and stuff, but they just shrink the size of the table?

Here’s my code

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@600&family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
td {
  font-family: 'Anek Latin', sans-serif;
  border: 2px solid white;
  background-color: rgba(43, 215, 52, 0.606);
  border-radius: 7px;
  outline: #8B8000;
  background-image: linear-gradient(rgba(43, 215, 52, 0.606), green, olive, #8B8000, #676d42);
}

th {
  border: 2px solid rgba(158, 176, 114, 0.238);
  background-color: rgba(155, 205, 54, 0.793);
  background-blend-mode: multiply;
  background-image: linear-gradient(olive, #4b5320, #676d42, #8B8000, #5e6828);
  font-family: 'Anek Latin', sans-serif;
  border-radius: 7px;
  outline: black;
}

table {
  border: 1px solid white;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  width: 500px;
  text-align: center;
  font-size: 20px;
  text-align: center;
}

<div>
  <table>
    <tr>
      <th colspan="11">Student's Name</th>
      <th colspan="3">Roll no.</th>
      <th colspan="3">Marks Obtained (out of 720)</th>
    </tr>
    <tr>
      <td colspan="11">SOYEB AFTAB</td>
      <td colspan="3">5049</td>
      <td colspan="3">720</td>
    </tr>
    <tr>
      <td colspan="11">AKANSHA SINGH</td>
      <td colspan="3">1083</td>
      <td colspan="3">720</td>
    </tr>
    <tr>
      <td colspan="11"><small>TUMMALA SNIKITHA</small></td>
      <td colspan="3">2291</td>
      <td colspan="3">715</td>
    </tr>
    <tr>
      <td colspan="11">VINEET SHARMA</td>
      <td colspan="3">5561</td>
      <td colspan="3">715</td>
    </tr>
    <tr>
      <td colspan="11">KARTHIK REDDY</td>
      <td colspan="3">4153</td>
      <td colspan="3">710</td>
    </tr>
    <tr>
      <td colspan="11">GURIKIRAT SINGH</td>
      <td colspan="3">9201</td>
      <td colspan="3">624</td>
    </tr>
    <tr>
      <td colspan="11">AYSHA SINGH</td>
      <td colspan="3">1134</td>
      <td colspan="3">555</td>
    </tr>
    <tr>
      <td colspan="11">SRIJAN REDDY</td>
      <td colspan="3">3171</td>
      <td colspan="3">549</td>
    </tr>
    <tr>
      <td colspan="11">AMAN SANNI</td>
      <td colspan="3">4278</td>
      <td colspan="3">500</td>
    </tr>
  </table>
  <div>

I guess the margin thing doesn’t work because of the div? Should I remove the div or is there a way to center it with the div?

>Solution :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@600&family=Open+Sans&family=Poppins:wght@300;500&family=Roboto+Mono:wght@700&family=Smooch+Sans:wght@300;900&display=swap');
        td {
          font-family: 'Anek Latin', sans-serif;
          border: 2px solid white;
          background-color: rgba(43, 215, 52, 0.606);
          border-radius: 7px;
          outline: #8B8000;
          background-image: linear-gradient(rgba(43, 215, 52, 0.606), green, olive, #8B8000, #676d42);
        }

        th {
          border: 2px solid rgba(158, 176, 114, 0.238);
          background-color: rgba(155, 205, 54, 0.793);
          background-blend-mode: multiply;
          background-image: linear-gradient(olive, #4b5320, #676d42, #8B8000, #5e6828);
          font-family: 'Anek Latin', sans-serif;
          border-radius: 7px;
          outline: black;
        }

        table {
          border: 1px solid white;
          /* margin-left: auto; */
          /* margin-right: auto; */
          border-collapse: collapse;
          width: 500px;
          text-align: center;
          font-size: 20px;
          text-align: center;
        }

        .container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
          <tr>
            <th colspan="11">Student's Name</th>
            <th colspan="3">Roll no.</th>
            <th colspan="3">Marks Obtained (out of 720)</th>
          </tr>
          <tr>
            <td colspan="11">SOYEB AFTAB</td>
            <td colspan="3">5049</td>
            <td colspan="3">720</td>
          </tr>
          <tr>
            <td colspan="11">AKANSHA SINGH</td>
            <td colspan="3">1083</td>
            <td colspan="3">720</td>
          </tr>
          <tr>
            <td colspan="11"><small>TUMMALA SNIKITHA</small></td>
            <td colspan="3">2291</td>
            <td colspan="3">715</td>
          </tr>
          <tr>
            <td colspan="11">VINEET SHARMA</td>
            <td colspan="3">5561</td>
            <td colspan="3">715</td>
          </tr>
          <tr>
            <td colspan="11">KARTHIK REDDY</td>
            <td colspan="3">4153</td>
            <td colspan="3">710</td>
          </tr>
          <tr>
            <td colspan="11">GURIKIRAT SINGH</td>
            <td colspan="3">9201</td>
            <td colspan="3">624</td>
          </tr>
          <tr>
            <td colspan="11">AYSHA SINGH</td>
            <td colspan="3">1134</td>
            <td colspan="3">555</td>
          </tr>
          <tr>
            <td colspan="11">SRIJAN REDDY</td>
            <td colspan="3">3171</td>
            <td colspan="3">549</td>
          </tr>
          <tr>
            <td colspan="11">AMAN SANNI</td>
            <td colspan="3">4278</td>
            <td colspan="3">500</td>
          </tr>
        </table>
        <div>
</body>
</html>

Add class to your container div:

<div class="container">
        <table>

Then just remove unnecessary margins in table and use container as flex (you need to setup height have vertical alignment work) using this lines:

table {
  border: 1px solid white;
  /* margin-left: auto; */
  /* margin-right: auto; */
  border-collapse: collapse;
  width: 500px;
  text-align: center;
  font-size: 20px;
  text-align: center;
}

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}