CSS layout tutorial: How to achieve vertical centering

Preface

I have been summarizing my front-end knowledge recently and have also participated in some interviews. During the interview, I encountered a question requiring vertical centering. Now I will summarize this to consolidate my knowledge.

CSS vertical centering

1. Use line-height to achieve centering. This method is suitable for pure text.

<!-- css -->
<style>
.parents {
  height: 400px;
  line-height: 400px;
  width: 400px;
  border: 1px solid red;
  text-align: center;
}

.child {
  background-color: blue;
  color: #fff;
}
 </style>
</head>

<body>
<!-- html -->
<div class="parents">
   <span class="child">css layout, vertical centering</span>
</div>
</body>

2. By setting the relative positioning of the parent container and the absolute positioning of the child, the label is adaptively centered through margin;

<!-- css -->
<style>
.parents {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  position: relative;
}

.child {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: blue;
  /* Set the four directions to 0, and then use margin to auto to adaptively center*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
 </style>
</head>

<body>
<!-- html -->
<div class="parents">
  <span class="child">css layout, vertical centering</span>
</div>
</body>

3. Flexible layout flex The parent is set to display: flex; the child is set to margin auto to achieve adaptive centering;

  <!-- css -->
  <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: flex;
    }

    .child {
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #333;
      background-color: yellow;
      margin: auto;
  }
 </style>
</head>

<body>
 <!-- html -->
  <div class="parents">
    <span class="child">css layout, vertical centering</span>
  </div>
</body>

4. The parent is set to relative positioning, the child is set to absolute positioning, and it is achieved through displacement transform;

  <!-- css -->
  <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      position: relative;
    }

    .child {
      width: 200px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #fff;
      background-color: green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child">css layout, vertical centering</span>
  </div>
</body>

5. The parent sets the elastic box and sets the elastic box related properties;

 <!-- css -->
 <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center; /* vertical */
    }

    .child {
      width: 200px;
      height: 100px;
      color: black;
      background-color: orange;
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child"></span>
  </div>
</body>

6. Grid layout, the parent is converted into a table, and then the child is set to inline or inline block. (It should be noted that the prerequisite for using vertical-align: middle is inline elements and elements with a display value of table-cell).

 <!-- css -->
 <style>
    .parents {
      height: 400px;
      width: 400px;
      border: 1px solid red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .child {
      width: 200px;
      height: 100px;
      color: #fff;
      background-color: blue;
      display: inline-block; /* Child element settings inline or inline block*/
    }
  </style>
</head>

<body>
  <!-- html -->
  <div class="parents">
    <span class="child"></span>
  </div>
</body>

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.

<<: Color hexadecimal color code table display and hexadecimal value comparison display for easy search

>>: Web skills: Multiple IE versions coexistence solution IETester

A brief discussion on several situations where adding indexes to MySQL does not take effect

CSS layout tutorial: How to achieve vertical centering

A brief discussion on several situations where adding indexes to MySQL does not take effect

Common DIV tasks (Part 2) — Transform into editors and various DIY applications of DIV

How to install JDK and Mysql on Ubuntu 18.04 Linux system

Detailed explanation of Vue custom instructions and their use

CSS3 diamond puzzle realizes the function of rotating only div and not rotating the background image

Detailed explanation of the latest IDEA process of quickly deploying and running Docker images

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

Summary of solutions to common Linux problems

Sample code for implementing DIV suspension with pure CSS (fixed position)

Detailed example of using CSS to beautify HTML form controls (form beautification)

Recommend

Basic Implementation of AOP Programming in JavaScript

Simple steps to write custom instructions in Vue3.0

Implementation of css transform page turning animation record

Detailed explanation of MySQL stored procedures, cursors, and transaction examples

Cross-browser local storage Ⅰ

Common considerations for building a Hadoop 3.2.0 cluster

MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID

A collection of information about forms and form submission operations in HTML

Simple example of using Docker container

Solve the black screen problem after VMware installs Linux system and starts

Detailed explanation of crontab scheduled execution command under Linux

How to implement h5 input box prompt + normal text box prompt

Vue+ElementUI implements paging function-mysql data

Record the whole process of MySQL master-slave configuration based on Linux

Detailed explanation of MySQL user rights management