Center a Div ( Ver & Hor )

Center a DIV Horizontally and Vertically:

Method - 1 :

HTML:

<div id="wrapper">

   <div id="main">

       Content goes here

   </div>

</div>

CSS:

body, html, #wrapper {

    width: 100%;

    height: 100%

}

#wrapper {

    display: table

}

#main {

    display: table-cell;

    vertical-align: middle;

    text-align: center 

}

Method - 2 :

CSS:

body { margin: 0px; }

.background {
width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
background-color: yellow;
}

.content {
     width: 200px;
     height: 400px;
     background-color: blue;
     position:absolute;
     left:0; right:0;
     top:0; bottom:0;
     margin:auto;
     max-width:100%;
     max-height:100%;
     overflow:auto;
}


HTML:

<div class="background">
    <div class="content"> some text </div>
</div>


Method - 3:

HTML:

<div class="centered">
     What one fool can do, another can
</div>

CSS:

.centered {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;

}

Method - 3:

HTML:

<div id="wrapper">

  <div id="main">Content goes here</div>

</div>

CSS:

body, html, #wrapper { width: 100%; height: 100% }

#wrapper { display: table }

#main { display: table-cell; vertical-align: middle; text-align:center }