Original code: <!DOCTYPE html> <html lang="Zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="stylesheet" href="center.css"> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
body { background-color: #6ed0ff; } .father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px; } .son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px; } Original effect: To achieve the vertical centering effect of the child box relative to the parent box: 1. .father { display: grid; } .son { align-self: center; justify-self: center; } 2. .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } 3. .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 4. .father { position: relative; } .son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 5. .father { display: flex; justify-content: center; align-items: center; } 6. .father { overflow: hidden; } .son { margin: 50% auto; transform: translateY(-50%); } 7. .father { display: table-cell; text-align: center; vertical-align: middle; } .son { display: inline-block; } 8. .father { text-align: center; line-height: 300px; } .son { display: inline-block; vertical-align: middle; } This concludes this article on 8 ways to use CSS to center a box horizontally and vertically. For more information on how to center a box horizontally and vertically with CSS, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Specific use of MySQL internal temporary tables
>>: How to set a fixed IP address for a VMware virtual machine (graphic tutorial)
This article mainly introduces the Mysql backup m...
1. Download the corresponding installation file f...
Table of contents Why use day.js Moment.js Day.js...
rm Command The rm command is a command that most ...
What is LNMP: Linux+Nginx+Mysql+(php-fpm,php-mysq...
8 optimization methods for MySQL database design,...
Problem Description I recently encountered a prob...
Pop-up windows are often used in actual developme...
1. Create a table CREATE TABLE `student` ( `id` i...
According to the coefficient of pi and the radius...
1. Overview This article systematically explains ...
p>Manually start in "Services" and i...
Table of contents Preface 1. Binary Tree 1.1. Tra...
It is recommended that you do not set the width, h...
1. Configure Docker remote connection port Locate...