How to align the <div class="btns"> block in the center?

 .btns { position: absolute; margin-top: 130px; } button:first-child { width: 210px; height: 50px; border-radius: 10px; background-color: #f7600e; color: #fff; } button:last-child { width: 210px; height: 50px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: #303338; color: #fff; } 
 <div class="btns"> <button>HIRE US</button> <button>OUR WORKS</button> </div>

    4 answers 4

    Use display: flex + align-items or justify-content :

     body { margin: 0; /*это для stackoverflow*/ } .btns { display: flex; align-items: center; justify-content: center; height: 100vh; } button { margin: 0 4px; border: 0; border-radius: 10px; width: 210px; height: 50px; text-transform: uppercase; color: #fff; } button:first-child { background-color: #f7600e; } button:last-child { background-color: #303338; } 
     <div class="btns"> <button>Hire us</button> <button>Our works</button> </div>

      There are very different ways to align the blocks in the center. The easiest to date - technology FlexBox.

      Put your .btns block in some flexible container, its display property should be equal to flex . And using align-items and justify-content set the alignment.

      Like this:

       display: flex; justify-content: center; align-items: center; 

       .centeral-container { display: flex; justify-content: center; align-items: center; background: azure; height: 200px; } .btns { background: red; } 
       <div class="centeral-container"> <div class="btns"> <p>ЭТО ТИПА КНОПКА</p> </div> </div>

        Solved a problem

         .btns { position: absolute; margin-top: 130px; width: 100%; text-align: center; } 

           .btns { position: absolute; margin-top: 130px; width: 100%; } button:first-child { width: 210px; height: 50px; border-radius: 10px; background-color: #f7600e; color: #fff; } button:last-child { width: 210px; height: 50px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: #303338; color: #fff; } 
           <div class="btns" align="center"> <button>HIRE US</button> <button>OUR WORKS</button> </div>