What are the ways in which elements are centered horizontally and vertically? What if the elements are of variable width and height?

The background,

It’s a common problem in development to center the content of an element both horizontally and vertically, not just text, but images or other elements

Centring is a very basic but very important application scenario. There are many ways to achieve centring, which can be divided into two categories:

  • The width and height of the centered element (child element) are known
  • The width and height of the center element are unknown

Second, implementation method

To centralize elements horizontally and vertically:

  • Margin: Auto

  • Leverage positioning +margin: negative

  • Use position + Transform

  • The table layout

  • Flex layout

  • The grid layout

Margin: Auto

Code first:

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

The parent is set to relative positioning, the child is set to absolute positioning, and the values of all four positioning attributes are set to 0. Then if the width height of the child is not set, it will be stretched to the same width height as the parent

Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto Margin: Auto

Leverage positioning +margin: negative

In most cases, the parent element is set to relative positioning, and the child element moves itself by 50% to center horizontally and vertically

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

The whole implementation idea is shown in the figure below:

  • The initial position is the position of square 1
  • When left and top are set to 50%, the inner child element is the position of square 2
  • When margin is set to negative, the inner child element is placed at square 3, the middle position

This scheme does not require the height of the parent element, that is, even if the height of the parent element changes, it can remain vertically centered on the parent element, and the horizontal direction is the same operation

However, the scheme needs to know the width and height of the child element itself, but we can move it by using the transform property below

Use position + Transform

The implementation code is as follows:

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
  transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

Translate (-50%, -50%) will shift the element by -50% of its width and height

In fact, this method is the same as the above negated margin negative usage, which can be said to be an alternative to margin negative without knowing the width and height of its own elements

The table layout

Set the parent element to display:table-cell and the child element to display: inline-block. Use vertical and text-align to center all in-line block-level elements horizontally and vertically

<style>
    .father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

Flex Flex layout

Let’s look at the overall implementation code:

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

Css3 has a Flex layout that makes it very easy to center vertically and horizontally

Here’s a quick look at the key properties of the Flex layout:

  • Display: flex: indicates that elements inside the container will be laid out according to Flex

  • Align-items: center indicates that the elements are centered horizontally relative to the container

  • Justify -content: Center in the same way

Grid layout

<style>
    .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }
</style>
<div class="father">
    <div class="son"></div>
</div>
Copy the code

As you can see here, girD grid layout and Flex flex layout are both simple and crude

summary

Among the above methods, horizontal and vertical centralization can be achieved without knowing the width and height of elements:

  • Margin: Auto

  • Use position + Transform

  • Leverage positioning +margin: negative

  • Flex layout

  • The grid layout

Third, summary

According to the nature of element labels, they can be divided into:

  • Inline elements are centered
  • Block level elements are centered

Inline elements are centered

Horizontal center

  • Line elements can be set: text-align: center
  • Flex layout setting parent element: display: flex; justify-content: center

Vertical center

  • Single-line text parent element confirms height: height === line-height
  • Ply: table-cell; vertical-align: middle

Block level elements are centered

Horizontal center

  • Margin: 0 auto
  • Absolute positioning +left:50%+margin: negative half of itself

Vertical center

  • Position: Absolute set left, top, margin-left, margin-top(fixed height)
  • display: table-cell
  • transform: translate(x, y)
  • Flex (Variable height, variable width)
  • Grid (variable height, variable width), relatively poor compatibility

reference

  • Juejin. Cn/post / 684490…