How to use CSS to center a box horizontally and vertically (8 methods)

How to use CSS to center a box horizontally and vertically (8 methods)

Original code:

center.html :

<!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>

center.css :

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:

insert image description here

To achieve the vertical centering effect of the child box relative to the parent box:

insert image description here

1. grid

.father {
    display: grid;
}

.son {
    align-self: center;
    justify-self: center;
}

2. absolute + negative margin

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

3. absolute + transform

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

4. absolute + margin: auto

.father {
    position: relative;
}

.son {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

5. flex

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

6. margin + transfrom

.father {
    overflow: hidden;
}

.son {
    margin: 50% auto;
    transform: translateY(-50%);
}

7. table-cell

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.son {
    display: inline-block;
}

8. inline-block + vertical-align

.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)

Recommend

Mysql backup multiple database code examples

This article mainly introduces the Mysql backup m...

More elegant processing of dates in JavaScript based on Day.js

Table of contents Why use day.js Moment.js Day.js...

Practical method of deleting files from Linux command line

rm Command The rm command is a command that most ...

Tutorial on how to deploy LNMP and enable HTTPS service

What is LNMP: Linux+Nginx+Mysql+(php-fpm,php-mysq...

CSS implements a pop-up window effect with a mask layer that can be closed

Pop-up windows are often used in actual developme...

A simple example of mysql searching for data within N kilometers

According to the coefficient of pi and the radius...

DOCTYPE element detailed explanation complete version

1. Overview This article systematically explains ...

Using JS to implement binary tree traversal algorithm example code

Table of contents Preface 1. Binary Tree 1.1. Tra...

In html table, set different colors and widths for each cell

It is recommended that you do not set the width, h...