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

How to solve the problem of automatic package update in Debian system

I don't know when it started, but every time ...

Vue+spring boot realizes the verification code function

This article example shares the specific code of ...

Graphical explanation of the function call of proto file in Vue

1. Compile proto Create a new proto folder under ...

Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized...

How to configure mysql5.6 to support IPV6 connection in Linux environment

Introduction: This article mainly introduces how ...

How to install tomcat8 in docker

1. Install tomcat8 with docker 1. Find the tomcat...

How to optimize MySQL query speed

In the previous chapters, we introduced how to ch...

Getting Started with Nginx Reverse Proxy

Table of contents Overview The role of reverse pr...

WiFi Development | Introduction to WiFi Wireless Technology

Table of contents Introduction to WiFi Wireless T...

Example analysis of MySQL startup and connection methods

Table of contents How to start mysqld Method 1: m...