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

Javascript common higher-order functions details

CSS layout tutorial: How to achieve vertical centering

Javascript common higher-order functions details

Detailed explanation of nginx optimization in high concurrency scenarios

HTTPS Principles Explained

How to create a Django project + connect to MySQL

How to detect if the current browser is a headless browser with JavaScript

WeChat applet to determine whether the mobile phone number is legal example code

A detailed introduction to for/of, for/in in JavaScript

Centos7.5 installs mysql5.7.24 binary package deployment

Summary of Common Terms in CSS (Cascading Style Sheet)

Introduction to the difference between shortcut icon and icon code

Recommend

Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP

Syntax alias problem based on delete in mysql

HTTPS Principles Explained

WeChat applet custom tabbar component

Some notes on mysql self-join deduplication

Detailed explanation of the problems and solutions encountered in flex multi-column layout

How to load the camera in HTML

Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project

Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8

Docker nginx + https subdomain configuration detailed tutorial

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'

Simple setup of VMware ESXi6.7 (with pictures and text)

HTML exceeds the text line interception implementation principle and code

Detailed steps for installing the decompressed version of MySQL 5.7.20 (two methods)

Basic Implementation of AOP Programming in JavaScript