Vertical horizontal center skills, listed below 4 kinds of vertical horizontal center, 2 more commonly used vertical center

1. Given the width and height of the child container, the code is as follows:

Child container Settings:

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

<head>
    <meta charset="UTF-8"< span style = "max-width: 100%; clear: both; min-height: 1emtype="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>
Copy the code

2. Do not know the width and height of the child container

Child container Settings:

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

<head>
    <meta charset="UTF-8"< span style = "box-sizing: border-box; color: RGB (74, 74, 74)type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }
    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"All HTML elements can be thought of as boxes. In CSS,"box model"This term is used in design and layout. The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements. </div> </div> </body> </html>Copy the code

3. Center Settings – Inline elements

To center a line element (text, image, etc.) horizontally, set the parent element to text-align: center. height: 50px; line-height: 50px; To achieve.

<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{
	text-align: center;
	height: 50px;
	line-height: 50px;
}
</style>

<body>
   <div class="txtCenter"I want the display horizontally centered in the parent container. </div> </body>Copy the code

4. I think the best way to center

You don’t need to know the width and height of block elements, and you don’t need to know the disadvantages of older browsers to set the styles below block elements

<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            height: 200px;
        }
        .item {
            background-color: #ccc;
        }
        .container-1 {
            position: relative;
        }
        .container-1 .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <div class="item">
            this is item
        </div>
    </div>
</body>
</html>
Copy the code

5. Horizontal center setting – fixed width block elements

Text-align: center does not work for blocky elements: Blocky elements have a fixed width. Elements that meet the two conditions of fixed width and block can be centered by setting the “left and right margin” value to “Auto”.

<! DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"</title> <style> div{border:1px solid red; width:200px; /* margin:20px auto; /* margin-left and margin-right are set to auto */} </style> </head> <body> <div> I am a fixed-width block element and I want it horizontally centered. </div> </body> </html>Copy the code

6. Horizontal center setting – Variable width block elements

Method 1: Step 1: Add a table tag (including,,,) to the middle element you want to set. Step 2: Set the “left and right margin center” for the table (this is the same as the fixed-width block element). Method 2: Change the display type of the block-level element to inline (set it to inline), then use text-align:center to center the block element’s parent element. Horizontally center the parent element by setting float, then position:relative and left:50% for the parent element and position:relative and left: -50% for the child element.