HTML - Center a DIV in the page

Do you want to center anything in the page, like here?



Here's the HTML extract that will center a DIV element to the center of the HTML page:



Code:

<div style="display:table; width:400px; height:300px; position:relative; text-align:center; border:1px solid red; ">
<div style="display:table-cell; vertical-align:middle; width: 250px; height:80px; position: absolute; top:50%; left:50%; ">
<div style="width: 250px; height:80px; position:relative; top:-50%; left:-50%; ">
                 <div style="border:1px solid green;"> here you add what to be center: text, images etc. </div>
</div> </div>
</div>





Result:

here you add what to be center: text, images etc.



Happy 'center' !

Note: you still can play with the width:250px and height:80px attibutes to adapt the position right in the center !

1 comment: