An example of vertical centering of sub-elements in div using Flex layout

1. Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for the box model. Any container can be specified as a Flex layout. Note that after setting the Flex layout, the float, clear and vertical-align properties of the child elements will become invalid.

Elements that use Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "items" for short. By default, a container has two axes: the horizontal main axis and the vertical cross axis. The starting position of the main axis (the intersection with the border) is called the main start, and the ending position is called the main end; the starting position of the cross axis is called the cross start, and the ending position is called the cross end. Items are arranged along the main axis by default. The main axis space occupied by a single item is called the main size, and the cross axis space occupied is called the cross size.

flex-direction flex-wrap flex-flo justify-content align-items align-content

2. Vertical centering of elements within a block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About vertical centering of elements</title>
    <style>
        html, body {
            border: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
 
        .div-main {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30%;
            width: 50%;
            background: #00a2d4;
        }
 
        .sub-span {
            margin: auto;
            font-size: xx-large;
        }
 
    </style>
</head>
 
<body>
 
<div class="div-main">
 
    <span class="sub-span">
    The Goddess of Luo River
</div>
</body>
</html>

This is the end of this article about examples of vertically centering sub-elements inside a div using Flex layout. For more information about vertically centering sub-elements inside a div using Flex, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Various methods to implement the prompt function of text box in html

>>: Analysis of the reasons why MySQL's index system uses B+ tree

Implementing simple chat room dialogue based on websocket

An example of vertical centering of sub-elements in div using Flex layout

Implementing simple chat room dialogue based on websocket

Win7 installation MySQL 5.6 tutorial diagram

How to solve the phantom read problem in MySQL

jQuery+Ajax to achieve simple paging effect

TypeScript namespace explanation

Practical record of vue using echarts word cloud chart

Detailed explanation of the basic usage of SSH's ssh-keygen command

Optimization methods when Mysql occupies too high CPU (must read)

How to configure multiple tomcats with Nginx load balancing under Linux

Pure CSS to achieve hover image pop-out pop-up effect example code

Recommend

How to implement CSS to display ellipsis when single-line or multi-line text overflows

Common HTML tag writing errors

MySQL 8.0.18 installation and configuration method graphic tutorial under MacOS

Detailed explanation of MySQL backup and recovery practice of mysqlbackup

Does MySql need to commit?

MySQL daily statistics report fills in 0 if there is no data on that day

Detailed explanation of axios encapsulation and API interface management in React project

JavaScript mobile H5 image generation solution explanation

Solution to the inconsistency between crontab execution time and system time

Detailed explanation of non-parent-child component value transfer in Vue3

Introduction and usage examples of ref and $refs in Vue

Detailed steps for Linux firewall configuration (based on yum warehouse configuration)

Basic usage examples of listeners in Vue

A brief analysis of React's understanding of state

How to set the user root password and remote connection method for Alibaba Cloud ECS instance