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

13 JavaScript one-liners that will make you look like an expert

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

13 JavaScript one-liners that will make you look like an expert

Linux parted disk partition implementation steps analysis

Detailed explanation of Json format

Introduction to the usage of common XHTML tags

The difference between Input's size and maxlength attributes

Solution to MySQL service 1067 error: modify the mysql executable file path

CentOS 6.5 configuration ssh key-free login to execute pssh command explanation

How to use Linux paste command

Object-Oriented Programming with XHTML and CSS

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

Recommend

How to install Linux flash

CSS to achieve the small sharp corner effect of bubbles

HTML Tutorial: title attribute and alt attribute

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization

MySQL trigger principle and usage example analysis

Docker case analysis: Building a MySQL database service

How to use Docker to build enterprise-level custom images

Summary of Linux sftp command usage

Common writing examples for MySQL and Oracle batch insert SQL

Writing Snake Game with Native JS

Example of implementing a virtual list in WeChat Mini Program

Mini Program Development to Implement Unified Management of Access_Token

Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

Solve MySQL startup error: ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

How to process blob data in MySQL