translate(-50%,-50%) in CSS achieves horizontal and vertical centering effect

translate(-50%,-50%) in CSS achieves horizontal and vertical centering effect

translate(-50%,-50%) attributes:
Move it up and left by 50% of its length and width to center it.

Unlike using margin to achieve centering, margin must know its own width and height, while translate can be centered without knowing the width and height. The percentage in the tranlate function is relative to the width and height.
(When top and left are 50%, the upper left corner of the window is used as the origin).

Example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .container {
            position: relative;
            width: 50%;
        }

        .container img {
            width: 100%;
            display: block;
            height: auto;
        }

        .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: 0.5s ease;
            background: rgb(0, 0, 0);
        }

        .container:hover .overlay {
            opacity: 0.5;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h2>Fade-in effect</h2>

    <div class="container">
        <img src="./img/photo2.jpg" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>
</body>

</html>

Effect:

insert image description here

This is the end of this article about how to achieve horizontal and vertical centering with translate(-50%, -50%) in CSS. For more information about horizontal and vertical centering with css translate, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  HTML vertical column display text to make the text display in vertical columns

>>:  A brief discussion on the design and optimization of MySQL tree structure tables

Recommend

win2008 server security settings deployment document (recommended)

I had been working on the project before the New ...

Based on vue-simple-uploader, encapsulate the global upload plug-in function of file segment upload, instant upload and breakpoint resume

Table of contents 1. Introduction 2. About vue-si...

Solve the problem of combining AND and OR in MySQL

As shown below: SELECT prod_name,prod_price FROM ...

How to upgrade all Python libraries in Ubuntu 18.04 at once

What is pip pip is a Python package management to...

Detailed steps for remote deployment of MySQL database on Linux

Linux remote deployment of MySQL database, for yo...

Implementation of adding remark information to mysql

Preface Some people have asked me some MySQL note...

Detailed explanation of the usage of position attribute in HTML (four types)

The four property values ​​of position are: 1.rel...

15 Linux Command Aliases That Will Save You Time

Preface In the process of managing and maintainin...

Mobile front-end adaptation solution (summary)

I searched online and found that many interviews ...

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Table of contents 1. Original demand 2. Solution ...

Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes

This article uses examples to describe the common...

JavaScript to implement checkbox selection or cancellation

This article shares the specific code of JavaScri...

Detailed Example of Row-Level Locking in MySQL

Preface Locks are synchronization mechanisms used...

HTML text escape tips

Today I saw a little trick for HTML text escaping ...

Detailed explanation of the use of ElementUI in Vue

Login + sessionStorage Effect display After a suc...