Why HTML code is not aligning in PDF while exporting HTML using PHP

I'm using PHP mpdf library for PDF export. But the HTML code alignment and position of all content changes when i export HTML to PDF. Please explain how can I export the full HTML page as it is to the PDF page.

<?php $html='<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style type="text/css">
        body, html { height: 100%; margin: 0px; width: 100% !important;}
    </style>
</head>
<body>
 <center>
    <div class="container" style="position: relative; width: 80%; left: 20%; display: block; text-align: center;">
        <div style="position: absolute; left: 40%; width: 60%; text-align: center;">
            <img src="p1/logo.png">
            <h1 style="text-align: center;">TALENTX™</h1>
            <h1>Profile</h1>
            <h1>Aljoharah   AlBabtain</h1>
            <p>RESULTS REFERENCE REPORT JUNE 2020</p>           
        </div>
    </div>
</center>
</body>
</html>';

require_once APPPATH . 'libraries/mpdf/autoload.php';
 $mpdf = new \mPDF('utf-16','A4','');
 $html = $this->load->view('reps/p1',null,true);

 $mpdf->WriteHTML($html);
 $mpdf->Output("files/test.pdf",'F');

Solution

The best way for aligning the HTML content in PDF export or for printout is the <table> approach. Put all your content in the table columns.
I use this approach and all my problem fixed.