About css Chinese text and box centering method

目录

文字中中

盒居中

文字居中

1. Using text-align and line-height

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Text centered</title>
    <link rel="stylesheet" href="">
    <style>
Div {
Width: 100px;
Height: 100px;
Border: 1px solid red;
/*Vertically centered*/
Line-height: 100px;
/* horizontally centered*/
Text-align: center;
}
    </style>
</head>

<body>
    <div>text centered</div>
</body>
</html>

2.Use padding and text-align

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
        Div {
             Width: 100px;
            /*Do not add height*/ at this time
            Border: 1px solid red;
            /*Vertically centered*/
             Line-height: 30px;
            Padding: 35px 0;
            /* horizontally centered*/
            Text-align: center;
}
    </style>
</head>

<body>
    <div>text centered</div>
</body>
</html>

盒居中

1. Horizontal centered

Set to the child element itself set width

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Horizontal center</title>
    <link rel="stylesheet" href="">
    <style>
    Div {
        Border: 1px solid red;
    }
    .parent {
        Width: 300px;
        Height: 300px;
    }
    .child {
        Width: 50px;
        Height: 50px;
        /* horizontally centered*/
        Margin: 0 auto;
    }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.Vertically centered

1. Set relative positioning

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vertically centered</title>
    <link rel="stylesheet" href="">
    <style>
    Div {
        Border: 1px solid red;
    }
    .parent {
        Width: 300px;
        Height: 300px;
    }
    .child {
        Width: 50px;
        Height: 50px;
        /* horizontally centered*/
        Margin: 0 auto;
        /* achieve vertical centering*/
        Position: relative;
        Top: 50%;
        /* value is height/2*/
        Margin-top: -25px;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

2.Set absolute targeting

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vertically centered</title>
    <link rel="stylesheet" href="">
    <style>
    Div {
        Border: 1px solid red;
    }
    .parent {
        Width: 300px;
        Height: 300px;
        /* sets the parent element to relative positioning */
        Position: relative;
    }
    .child {
        Width: 50px;
        Height: 50px;
        Position:absolute;
        /* horizontally centered*/
        Left: 50%;
        /* achieve vertical centering*/
        Top: 50%;
        /* value is height/2*/
        Margin-top: -25px;
        /* value is width/2*/
        Margin-left: -25px;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

3. Set the flex

<!DOCTYPE html> to the parent
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vertically centered</title>
    <link rel="stylesheet" href="">
    <style>
    Div {
        Border: 1px solid red;
    }
    .parent {
        Width: 300px;
        Height: 300px;
        Display: flex;
        /*Arrangement of the spindle Default x-axis*/
        Justify-content: center;
        / * Arrangement of cross axes * /
        Align-items: center;
    }
    .child {
        Width: 50px;
        Height: 50px;
    }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

</html>