display table ,, Table cell center div

HTML

   <div class="parent">

    

    <div class="child">

        <div class="content"></div>

    </div>

    

    <div class="child2">

        <div class="content"></div>

    </div>

    

    

    </div>

CSS

  .parent{

            background-color: green; height: 500px; width: 600px; display: table; text-align: center; border:1px solid #000

        }

        .child{

            background-color: red;display:table-cell;vertical-align: middle;

        }

        .child2{

            background-color: pink; display: table-cell; vertical-align: middle;

        }

        .content{

            background-color: blue; padding: 50px; display: inline-block;

        }

/*@@@@------------------------------------------------------------------------------------------------@@@@*/

Raam baad ilazz center div

HTML

 <div class="parent">

        <div class="content"></div>

    </div>

CSS

 *, body{ padding: 0px; margin: 0px;}

        .parent{

            background-color: green; height: 500px; position: relative;

        }

        .content{

            background-color: blue; padding: 50px; width: 150px; height: 150x; position: absolute;

            left: 50%;

            top: 50%;

            -webkit-transform: translate(-50%, -50%);

            -ms-transform: translate(-50%, -50%);

            -moz-transform: translate(-50%, -50%);

            -o-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

            

        }

/*@@@@------------------------------------------------------------------------------------------------@@@@*/

                                          Using Viewport Height

 

HTML

<section class="section1"></section>

   <section class="section2"></section>

   <section class="section3"></section>

   <section class="section4"></section>

CSS

 *, body{ padding: 0px; margin: 0px;}

        .section1, .section2, .section3, .section4{

            height: 100vh;

            width: 100%;

            float: left;

        }

        .section1{

            background-color: green;

        }

        .section2{

            background-color: mediumvioletred;

        }

        .section3{

            background-color: orchid;

        }

        .section4{

            background-color: rebeccapurple;

        }