How to achieve horizontal and vertical centering

Time:2022-1-8

How to realize the horizontal and vertical centering of a block level element

1. Use display: table cell; Property

display:table-cell; Combine vertical align: middle; Use to achieve vertical centering, margin: 0 atuo; Horizontal centering of child elements can be realized.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        < title > table cell centered < / Title >
        <style type="text/css">
            .content{
                border: 1px solid blue;
                display: table;
                margin: 50px auto;
            }
            .table{
                height: 300px;
                width: 300px;
                display: table-cell;
                vertical-align: middle;
                border: 1px solid red;
            }
            .box{
                height: 150px;
                width: 150px;
                background: #109D71;
                margin: 0 auto;
                display: table;
            }
            .word{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <div>
                        Vertically and horizontally centered
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
How to achieve horizontal and vertical centering

image.png

2. Flex flexible layout

View detailshttps://www.runoob.com/w3cnote/flex-grammar.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        < title > flex layout < / Title >
        <style>
            .content {
                width: 300px;
                height: 300px;
                margin: 50px;
                border: 1px solid #109D71;
                display: flex;
                align-items: center;
                justify-content: center;
                
            }
            .box{
                width: 150px;
                height: 150px;
                background-color: #109D71;
                text-align: center;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                Horizontal vertical center
            </div>
        </div>
    </body>
</html>
How to achieve horizontal and vertical centering

image.png

3. Use absolute positioning to separate elements from ordinary document flow, and then combine margin: Auto.

<!DOCTYPE html>
<head>
    < title > absolute center < / Title >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .content {
            width: 300px;
            height: 300px;
            border: 1px solid  #109D71;
            position:relative;
        }

        .box {
            margin:auto;
            width: 100px;
            height: 100px;
            background: #109D71;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</html>

4. Absolute + margin is centered by calculating the width and height of elements

When centering the child element, margin must know the width and height of the child element. Do not use percentage.

<!DOCTYPE html>
<head>
    < title > absolute + margin calculation element width and height judgment center < / Title >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .content {
            width: 300px;
            height: 300px;
            border: 1px solid #109D71;
            position: relative;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            /* top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px; */
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            background: #109D71;
        }
    </style>
</head>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</html>

5. Absolute + translate: move the element 50% and 50% of itself through translate to achieve horizontal and vertical centering.

Translate (- 50%, – 50%) attribute: up (x-axis) and left (Y-axis), move 50% of its length and width to make it in the center.
top: 50%; left: 50%;: It takes the upper left corner of the window as the origin and needs to reduce half of its width and height to be centered.
Unlike using margin to achieve centering,Margin must know its own width and height, while translate can be centered without knowing its width and height. The percentage in the tranlate function is the percentage relative to its own width and height

<!DOCTYPE html>
<head>
    <title>absolute+translate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .content {
            width: 300px;
            height: 300px;
            border: 1px solid #109D71;
            position: relative;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            /*Progressive enhancement*/
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: #109D71;
        }
    </style>
</head>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</html>

I recommend using methods 2 and 3,
Flex layout method is suitable for local use.
Absolute positioning is suitable for full screen scenes, such as pop-up frames.

A person has at least one dream and has a reason to be strong. If the heart has no habitat, it is wandering everywhere.

How to achieve horizontal and vertical centering

Recommended Today

The whole tutorial of docker installation and use, installation / complete command / dockerfile image production / docker container arrangement and one click installation of nginx + redis + MySQL / visualizer portal (version 2022)

官网: https://docs.docker.com/ 官网: https://www.docker.com/ docker 镜像市场: https://hub.docker.com/ 一、docker 说明 1.1、docker 核心 1、Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源,Docker 是一个 CS 架构软件。 2、Docker 是一个虚拟化轻量级linux服务器,可以解决我们在开发环境中运行配置问题 3.、Docker的主要目标是‘build ,ship and run any app,anywhere’,一次封装,到处运行 4、容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。 1.2、docker 版本问题 .Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版),我们用社区版就可以了。 1.3、docker 架构( 3大核心) · 1、Images 镜像 (等于软件) · 2、Registry […]