This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Center question

The center question is really a commonplace topic, basically every interview will be asked, after all, in the style of the center really everywhere, about the center of the article everywhere on the Internet, remember 4-5 kinds, the future interview and work without any problems

Common center is divided into many, such as horizontal center, vertical center, horizontal vertical center, fixed width height and indefinite width height, we divided the fixed width height and indefinite width height to discuss several ways of horizontal vertical center

1. High fixed width

  1. + margin: auto + left + right, top and bottom
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial =1.0"> <meta http-equiv=" x-uA-compatible "content="ie=edge"> < span style>.container{ margin: 30px; height: 400px; width: 400px; background: lightblue; position: relative; } p{ width: 100px; height: 100px; background: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto ; } </style> </head> <body> <div class="container"> <p></p> </div> </body> </html>Copy the code
  1. + margin: 50%
<style>
       .container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

Copy the code
  1. + the transform
 <style>
        .container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>

Copy the code
  1. Flex layout
  .container {
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
            width: 100px;
            height: 100px;
            background: red;

        }


Copy the code
  1. Grid layout margin: Auto;
 .container {
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
        }

        p {
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

Copy the code

2. Variable width and height

  1. Absolute positioning + transform
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial =1.0"> <meta http-equiv=" x-uA-compatible "content="ie=edge"> < span style>.container{ margin: 30px; height: 400px; width: 400px; background: lightblue; position: relative; } p{ background: red; position: absolute; top:0; bottom: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); } < / style > < / head > < body > < div class = "container" > < p > to study well. < / p > < / div > < / body > < / HTML >Copy the code
  1. table-cell
.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        p{
           
            background: red;
            display: inline-block;
            
        }

Copy the code
  1. Flex layout
.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
           
            background: red;
        }

Copy the code
  1. flex + margin:auto
 .container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            
        }
        p{
            margin: auto;
            background: red;
        }

Copy the code
  1. Grid + Flex layout
.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
            
            background: red;
            align-self: center;
            justify-self: center;
        }

Copy the code
  1. Gird + Margin Layout
.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
            
            background: red;
            margin: auto;
        }

Copy the code

Divide the discussion between horizontal center and vertical center

1. Inline elements are centered

Horizontal center

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

Vertical center

Height === line-height Multi-line text parent element height: disaply: table-cell; vertical-align: middle;

2. Block level elements are centered

Horizontal center

Margin: 0 auto; Indefinite width: refer to the example of indefinite width and height in the appeal example.

Vertical center

Position: Absolute set left, top, margin-left, margin-to(set height); Margin: Auto (fixed height); Display: table – cell; The transform: translate (x, y); Flex (variable height, variable width); Grid (variable height, variable width), compatibility is relatively poor;