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
I don't know when it started, but every time ...
When the software package does not exist, it may ...
Preface Every time I use the terminal to create a...
This article example shares the specific code of ...
1. Compile proto Create a new proto folder under ...
Let me share with you a creative opening realized...
Introduction: This article mainly introduces how ...
1. Install tomcat8 with docker 1. Find the tomcat...
background: Since the company's projects seem...
In the previous chapters, we introduced how to ch...
aforementioned This article is very short~ The ma...
Table of contents Overview The role of reverse pr...
Table of contents Introduction to WiFi Wireless T...
Preface The concept of dark mode originated from ...
Table of contents How to start mysqld Method 1: m...