Discussion on horizontal and vertical centering of elements in HTML

Discussion on horizontal and vertical centering of elements in HTML

When we design a page, we often need to center the DIV, and center it horizontally and vertically relative to the page window, such as centering the login window.

So far, many methods have been explored.

HTML:

XML/HTML CodeCopy content to clipboard
  1. < body >   
  2.      < div   class = "maxbox" >   
  3.          < div   class = "minbox align-center" > </ div >   
  4.      </ div >   
  5. </ body >   
  6.   

Effect diagram (the following methods have the same effect diagram):

The first one: CSS absolute positioning

Mainly use absolute positioning, and then use margin to adjust to the middle position.

Parent element:

CSS CodeCopy content to clipboard
  1. .maxbox{
  2.      position : relative ;
  3.      width : 500px ;
  4.      height : 500px ;
  5.      margin : 5px ;
  6. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  7. }
  8.   

Child Elements:

CSS CodeCopy content to clipboard
  1. .minbox{
  2.      width : 200px ;
  3.      height : 200px ;
  4. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  5. }

Horizontal and vertical center alignment:

CSS CodeCopy content to clipboard
  1. .align- center {
  2.      position : absolute ;
  3.      left : 50%;
  4.      top : 50%;
  5.      margin-left : - 100px ; /*width/-2*/   
  6.      margin-top : - 100px ; /*height/-2*/   
  7. }

The second method: CSS absolute positioning + Javascript/JQuery

Mainly use absolute positioning, and then use Javascript/JQuery to adjust it to the middle position. Compared with the first method, this method improves the flexibility of the class.

Parent element:

CSS CodeCopy content to clipboard
  1. .maxbox{
  2.      position : relative ;
  3.      width : 500px ;
  4.      height : 500px ;
  5.      margin : 5px ;
  6. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  7. }
  8.   

Child Elements:

CSS CodeCopy content to clipboard
  1. .minbox{
  2.      width : 200px ;
  3.      height : 200px ;
  4. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  5. }

Horizontal and vertical center alignment:

CSS CodeCopy content to clipboard
  1. .align- center {
  2.      position : absolute ;
  3.      left : 50%;
  4.      top : 50%;
  5. }
  6.   

JQuery:

JavaScript CodeCopy content to clipboard
  1. $( function () {
  2. $( ".align-center" ).css(
  3. {
  4.              "margin-left" : ($( ".align-center" ).width()/-2),
  5.              "margin-top" : ($( ".align-center" ).height()/-2)
  6. }
  7. );
  8. });
  9.   

The third type: CSS3 absolute positioning + displacement

The same effect can be achieved by using absolute positioning and CSS3's transform: translate.

Parent element:

CSS CodeCopy content to clipboard
  1. .maxbox{
  2.      position : relative ;
  3.      width : 500px ;
  4.      height : 500px ;
  5.      margin : 5px ;
  6. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  7. }
  8.   

Child Elements:

CSS CodeCopy content to clipboard
  1. .minbox{
  2.      width : 200px ;
  3.      height : 200px ;
  4. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  5. }
  6.   

Horizontal and vertical center alignment:

CSS CodeCopy content to clipboard
  1. .align- center {
  2.      position : absolute ;
  3.      top : 50%;
  4.      left : 50%;
  5. -webkit-transform: translate(-50%, -50%);
  6. -moz-transform: translate(-50%, -50%);
  7. transform: translate(-50%, -50%); /*Move left and up*/   
  8. }
  9.   

Fourth: Flexbox: [Flexible Layout Box Model]

It's too easy to make elements horizontal and vertical with the Flexbox model.

Here we need to change the HTML:

XML/HTML CodeCopy content to clipboard
  1. < div   class = "maxbox align-center" >   
  2.      < div   class = "minbox" > </ div >   
  3. </ div >   
  4.   

Parent element:

CSS CodeCopy content to clipboard
  1. .maxbox{
  2.      position : relative ;
  3.      width : 500px ;
  4.      height : 500px ;
  5.      margin : 5px ;
  6. box-shadow: 1px   1px   1px rgba(0, 0, 0, 0.8), - 1px - 1px   1px rgba(0, 0, 0, 0.8);
  7. }
  8.   

Child Elements:

C# Code to copy content to the clipboard
  1. .minbox{
  2. width: 200px;
  3. height: 200px;
  4. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
  5. }

Horizontal and vertical center alignment:

CSS CodeCopy content to clipboard
  1. .align- center {
  2.      display : flex;
  3.      display : -webkit-flex; /*Compatibility issue*/   
  4.      justify - content : center ;
  5. align-items: center ;
  6. }

Comparison of several methods:

The first type of CSS absolute positioning margin adjustment has good compatibility but lacks flexibility. If there are many boxes that need to be centered horizontally and vertically, different .align-center should be written because of their different widths and heights.
The second one uses scripting language, which has good compatibility and makes up for the shortcomings of the first one. The horizontal and vertical centering effects are not affected by changes in width and height.
The third one uses some new properties of CSS3 and is compatible with IE10, Chrome, Firefox, and Opera. The compatibility is not very good, and the horizontal and vertical centering effects are not affected by changes in width and height.
Using the Flexbox model, it is compatible with Firefox, Opera and Chrome, but IE is completely defeated. The horizontal and vertical centering effects are not affected by changes in width and height.

The above is the full content of this article. I hope it will be helpful for everyone’s study.

<<:  CSS delivery address parallelogram line style example code

>>:  MySQL query statement grouped by time

Recommend

Sharing tips on using vue element and nuxt

1. Element time selection submission format conve...

Solution to the problem that mysql cannot start after modifying the default path of the database

Preface When mysql modified the default database ...

VUE+SpringBoot implements paging function

This article mainly introduces how to implement a...

Brief Analysis of MySQL B-Tree Index

B-Tree Index Different storage engines may also u...

20 JS abbreviation skills to improve work efficiency

Table of contents When declaring multiple variabl...

Reasons and solutions for MySQL sql_mode modification not taking effect

Table of contents Preface Scenario simulation Sum...

Detailed graphic tutorial on installation, startup and basic configuration of MySQL under Windows version

download: Step 1: Open the website (enter the off...

js array fill() filling method

Table of contents 1. fill() syntax 2. Use of fill...

A brief analysis of the differences between undo, redo and binlog in MySQL

Table of contents Preface 【undo log】 【redo log】 【...

Analysis of Sysbench's benchmarking process for MySQL

Preface 1. Benchmarking is a type of performance ...

How to install MySQL and enable remote connection on cloud server Ubuntu_Server_16.04.1

1. Install MySQL: Use the following three command...

Example of how to display a default image when an image does not exist in HTML

An image link <img src="" /> I wa...

Detailed explanation of the principles and usage of MySQL stored procedures

This article uses examples to explain the princip...

vue3 custom directive details

Table of contents 1. Registering custom instructi...

MySQL 5.7.27 winx64 installation and configuration method graphic tutorial

This article shares the installation and configur...