The first one: Using the CSS position property <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { width: 40px; height: 40px; background-color: red; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } </style> <div class="div1"> <div class="div2"> </div> </div> Effect picture: Second type: Use the new CSS3 attributes table-cell, vertical-align:middle; <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: table-cell; vertical-align: middle; } .div2 { width: 40px; height: 40px; background-color: red; margin: auto; } </style> <div class="div1"> <div class="div2"> </div> </div> Effect: The third type: Layout using flexbox <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; display: flex; /*!*flex-direction: column;*!Optional*/ justify-content: center; align-items: center; } .div2 { height: 40px; width: 40px; background-color: red; } </style> <div class="div1"> <div class="div2"> </div> </div> Effect: The fourth type: Using the transform attribute (disadvantage: need to support Html5) <style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000; position: relative; } .div2 { height: 40px; width: 40px; background-color: red; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <div class="div1"> <div class="div2"> </div> </div> Effect picture: This concludes this article on several commonly used methods (summary) for centering a CSS box. For more information on centering a CSS box, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Detailed explanation of HTML page header code example
>>: Solution to high CPU usage of Tomcat process
Due to work requirements, I recently spent some t...
1. docker ps -a view the running image process [r...
Table of contents 1. The magical extension operat...
Problem: The null type data returned by mybatis d...
There are many tasks to be done in search engine o...
The automatic scrolling effect of the page can be...
Preface To modify file permissions in the termina...
<br />A year ago, there were no articles abo...
The future of CSS is so exciting: on the one hand,...
First look at the effect: Code: 1.html <div cl...
When using Docker in a production environment, da...
Sometimes you need to use links, but you don't...
Table of contents Shallow copy Deep Copy Replenis...
wangEditor is a web rich text editor developed ba...