CSS realizes div completely centered without setting height

Require

The div under the body is vertically centered
Vertically center text in div
The width and height of the div are both half the width of the body

analyze

It is not difficult to center a div. Consider using margin or left/top with translate attribute to achieve it.
The key point is that the height of the div is equal to half of the body. Since the body has no height, set the div height： 50%； the result is that the height of the div is 0
Even if the body is absolutely positioned so that the body height is 100vh, the div height is set to 50% which can only be half of the body height, not half of the width.
At this time, we need to use padding , because when setting the percentage of padding, the reference is the width of the parent container.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 50%;
            /* Center the div */
            position: relative;
            transform: translate(50%, 25%);
            /* */
            /* Here we solve the problem that the div height is half of the body width and the text is vertically centered*/
            padding-top: 25%;
            padding-bottom: 25%;
            line-height: 0;
            text-align: center;
            /* */
            background-color: #111;
            color: #fff;
        }
    </style>
</head>
<body>
    
    <div id="box">
        box123
    </div>
</body>
</html>

Effect

This is the end of this article about how to use CSS to completely center a div without setting a height. For more information about how to use CSS to completely center a div without setting a height, 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!

<<: JavaScript error handling try..catch...finally + covers throw+TypeError+RangeError

>>: Detailed explanation of Web front-end performance optimization: resource merging and compression