Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

In daily development, we often face the problem of how to achieve center alignment, horizontal alignment, vertical alignment. This is also a classic interview question, and this article will explain and implement each solution in detail, so that you can easily learn and understand

1. flex

With an elastic box layout, you simply add attributes to the parent of the block element to be processed:

 /* Elastic box layout */
 display: flex;
 /* Horizontal center */
 justify-content: center; 
 /* Vertical center */
 align-items: center;
Copy the code

This scheme can be realized without determining the width and height of the subbox.

Example code, copy to see the effect:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: orangered;

            /* Elastic box layout */
            display: flex;
            /* Horizontal center */
            justify-content: center; 
            /* Vertical center */
            align-items: center;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>
Copy the code

Effect:

2. Position (Need to determine the width and height of the child element)

  • The fatherElement set toRelative positioning:position: relative;The childElement set toAbsolute positioning:position: absolute
  • The childElement setTop and left are 50%:top: 50%; left: 50%;
  • The childElement setmargin-leftandmargin-topforNegative half of its width and height:margin-left: -50px; margin-top: -50px;Its width and height areheight: 100px; width: 100px;)

Example code, copy to see the effect:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(201.211.58);

            /* Parent box relative positioning */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(211.18.98);

            /* The subbox is absolutely positioned */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>
Copy the code

Effect:

3. Position + Transform element translation

Transform: translate(-50%,-50%); transform: translate(-50%,-50%);

That is:

  • The fatherElement set toRelative positioning:position: relative;The childElement set toAbsolute positioning:position: absolute
  • The childElement setTop and left are 50%:top: 50%; left: 50%;
  • The childElement setThe transform to translate (50%, 50%):transform: translate(-50%,-50%);

This method is quite special, although it only changed one line of code, but what is the principle? Just memorizing a line of code would seem sloppy.

So before we show the sample code, let’s see how this method implements horizontal and vertical centering.

transform: translate(x,y); Grammar defines the elements of the 2 d transformation, namely mobile elements (translation), finished this, let’s look at child elements set absolute positioning, the top and left after each move 50%, child elements on the upper left corner was the center of the box, the father is not implemented at this time the level of the child elements vertical center (i.e. the center of the child elements in the center of the parent box, Instead of the top left corner in the center of the parent box). Read on:

Translate (x,y) The percentages in parentheses will refer to their own width and width, not the width and height of the parent box, which is the most important point to understand in this method. For example, if the width is 100px and the height is 100px, translate will translate 50px to the right and 50px to the bottom, adding a minus sign will translate in the opposite direction. The effect of this move is that the center of the child element is in the center of the parent element, so that it is horizontally and vertically centered.

Example code, copy to see the effect:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(231.69.20);

            /* Parent box relative positioning */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(67.33.218);

            /* The subbox is absolutely positioned */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>
Copy the code

Effect:

4. Position + Margin: Auto

  • The fatherElement set toRelative positioning:position: relative;The childElement set toAbsolute positioning:position: absolute
  • The childElement setTop, bottom, left, and right are 0:top: 0; bottom: 0; left: 0; right: 0;
  • The childElement setMargin for the auto:margin: auto;

Example code, copy to see the effect:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 300px;
            background-color: rgb(74.199.43);

            /* Parent box relative positioning */
            position: relative;
        }

        .test-div {
            height: 100px;
            width: 100px;
            background-color: rgb(20.38.117);

            /* The subbox is absolutely positioned */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <section class="box">
        <div class="test-div"></div>
    </section>
</body>

</html>
Copy the code

Effect:

reference

  • Four ways to center elements horizontally and vertically
  • CSS Basics – Div horizontal and vertical centered && Text centered (single line, multiple lines)
  • Translate (x,y) If x and y values are percentages, what is the reference to calculate the percentages?