In the web page there are a lot of need in the middle of the situation, it contains knowledge is relatively rich, so as a qualified front-end ER you will?

Element constant width height

What do we do if the center element has a fixed width and height

Calculation method

  1. absolute + margin
/ * node is < body > < div class = "father" > < div class = 'child' > < / div > < / div > < / body >Copy the code
   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300 px;
        }
        .child{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-left: -50px;
            margin-top: -50px;
            background-color: aqua; 
        }
    </style>

Copy the code

Pay attention to the point

  • The absolute offset must be corrected according to its size
  • Using absoulte, the parent node cannot be static

2.absolute + calc

  <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position: absolute;
            top: calc(50% - 50px);
            left:  calc(50%  - 50px);
            width: 100px;
            height: 100px;
            background-color: aqua; 
        }
    </style>
Copy the code

The principle is similar to the first one.

margin auto

  1. absolute + margin: auto
   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: aqua; 
        }
    </style>
Copy the code
  • Set top:0, left:0, right:0, bottom:0, bottom:0, top:0, left:0, right:0, bottom:0

The results of the three methods are as follows

Center elements vary in width and height

First, the node information is given

<body>
    <div class="father">
    <div class='child'>hello css</div>
    </div>
</body>
Copy the code
  1. absoulte + transform
   <style>
        .father{
            position: relative;
            border: 10px solid red;
            width: 300px;
            height: 300px;
        }
        .child{
            position:absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: aqua; 
        }
    </style>
Copy the code
  • Translate can set percentages based on its own width and height
  1. Set to inline elements
 <style>
        .father{
            /* position: relative; */
            border: 10px solid red;
            line-height: 300px;
            width: 300px;
            text-align: center;
        }
        .child{
           font-size: 20px;
           display: inline-block;
           vertical-align: middle;
           line-height: initial;
        }
    </style>
Copy the code
  • Horizontal center with text-align
  • Use vertical to center the system vertically
  1. Use CSS – table
  <style>
        .father{
            display: table-cell;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            vertical-align: middle;
            text-align: center;
        }
        .child{
           font-size: 16px;
           display: inline-block;
        }
    </style>
Copy the code

or

    <style>
        .father{
            display: table;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            text-align: center;
        }
        .child{
            line-height: 1;
            display: table-cell;  
            vertical-align: middle;
        }
    </style>
Copy the code
  • Display: table-cell is equivalent to a TD label

The overall effect is as follows

Flex layout

Flex layout is very simple in today’s very common, recommend serious consolidation here recommend ruan Yifeng teacher’s blog

Flex Layout Tutorial: Syntax section

    <style>
        .father{
            display: flex;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            justify-content: center;
            align-items: center
            
        }
    </style>
Copy the code

Gird layout

This layout is kind of amazing and you can learn about it, but it’s not very compatible

CSS Grid Layout tutorial

 <style>
        .father{
            display: grid;
            border: 10px solid red;
            height: 300px;
            width: 300px;
            
            
        }
        .child{
            justify-self: center;
            align-self: center
        }
    </style>
Copy the code

To summarize

  • Absolute + margin method can be adopted when the width and height of child elements are determined and compatibility requirements are met
  • Compatibility requirements, variable width and height table layout
  • Flex layout is generally recommended