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

Causes and solutions for slow MySQL queries

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

Causes and solutions for slow MySQL queries

CSS Houdini achieves dynamic wave effect

CSS commonly used font style to set the font of a variety of changes (example detailed explanation)

Solve the problem of docker pull being reset

Solution to the Docker container not having permission to write to the host directory

HTML web page image tag

HTML meta usage examples

Automatically log out inactive users after login timeout in Linux

Solution to the horizontal scroll bar in iframe under IE6

Analysis of the HTML writing style and reasons of experienced people

Recommend

Markup language - CSS layout

Complete steps to set up automatic updates in CentOS 8

JavaScript implements the nine-grid mobile puzzle game

Solution to the problem that input in form cannot be submitted when disabled

The standard HTML writing method is different from the one automatically generated by Dreamweaver

Detailed explanation of hosts file configuration on Linux server

Example code for text origami effect using CSS3

The rel attribute of the HTML link tag

JavaScript to implement checkbox selection or cancellation

JSONP cross-domain simulation Baidu search

Vue uses calculated properties to complete the production of dynamic sliders

Web Design Teaching or Learning Program

js Promise concurrent control method

Implementation of HTTP and HTTPS services with Nginx reverse proxy for multiple domain names

Detailed explanation of mkdir command in Linux learning