4 ways to achieve horizontal and vertical centering in CSS

This article mainly shares with you 4 ways to implement CSS horizontal and vertical centering. In the plan, I also gave the width and height, but it does not mean that the width and height are fixed. But I thought I couldn't see the effect without giving width and height. The fact that this solution does not fix the width and height means that after using this solution, if the width and height of your parent element and child element change, the horizontal and vertical centering position can still be guaranteed.

The following four solutions are all achievable. When the width and height of the parent element or child element change, the horizontal and vertical centered layout is still maintained.

Option 1: Positioning

html

         <p class="father">
            <p class="son"></p>
         </p>

css

        .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;
        }

Option 2: flex

html remains unchanged

        <p class="father">
            <p class="son"></p>
        </p>

css

        .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

Option 3: table layout

You need to set the parent element to display:table-cell, and use vertical and text-align to center all inline block-level elements horizontally and vertically
Set display: inline-block for child elements

html unchanged

  <p class="father">
        <p class="son"></p>
    </p>

css

  .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;
        }

Option 4: grid layout (supported by the latest browsers)

html remains unchanged

        <p class="father">
            <p class="son"></p>
        </p>

css remains unchanged

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

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

Related recommendations:

#How to set the horizontal and vertical centering of elements in

#Code sharing on how to achieve horizontal and vertical centering and alignment in CSS

Introduction to several methods of achieving horizontal and vertical centering in CSS

The above is the detailed content of 4 ways to achieve horizontal and vertical centering in CSS. For more information, please follow other related articles on the PHP Chinese website!