Several commonly used methods for centering CSS boxes (summary)

Several commonly used methods for centering CSS boxes (summary)

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

Recommend

Some summary of html to pdf conversion cases (multiple pictures recommended)

Due to work requirements, I recently spent some t...

Steps to completely uninstall the docker image

1. docker ps -a view the running image process [r...

3 Tips You Must Know When Learning JavaScript

Table of contents 1. The magical extension operat...

Solution to MySQL IFNULL judgment problem

Problem: The null type data returned by mybatis d...

Div css naming standards css class naming rules (in line with SEO standards)

There are many tasks to be done in search engine o...

A simple way to achieve scrolling effect with HTML tag marquee (must read)

The automatic scrolling effect of the page can be...

Detailed explanation of viewing and setting file permissions on Mac

Preface To modify file permissions in the termina...

Compatibility with the inline-block property

<br />A year ago, there were no articles abo...

Realizing tree-shaped secondary tables based on angular

First look at the effect: Code: 1.html <div cl...

...

This article will show you the basics of JavaScript: deep copy and shallow copy

Table of contents Shallow copy Deep Copy Replenis...

Problems with using wangeditor rich text editing in Vue

wangEditor is a web rich text editor developed ba...