Three ways to realize the horizontal centering of elements and the understanding of the concepts of fixed layout and flow layout

The property of centering text in CSS is very simple to achieve, that is, set text-align:center. The "element" I am talking about here actually refers to the container. If you want a more appropriate label, it should be represented by div.
I believe that many web designers are familiar with the idea of centering elements horizontally. But sometimes, I wonder, why should we center elements horizontally? What is the reason? These are just some of my own opinions, written down...

First of all, to center the elements horizontally, you must understand the concepts of fixed layout and fluid layout in CSS design. The intuitive difference between them is whether a width is set for the element. Below are two code snippets to simply illustrate the difference between fixed layout and flow layout.
1. Fixed layout demo:

Copy code

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-layout</title>
<style type="text/css">
.wrapper{width:750px;position:relative;margin:0 auto;text-align:left;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</style>
</head>
<body>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</body>
</html>

2. Flow layout demo:

Copy code

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>col3-margin-layout</title>
<style type="text/css">
.contentArea{margin:0 160px;height:500px;background:#96c;}
.leftPanel{width:150px;float:left;height:500px;background:#999;}
.rightPanel{width:150px;float:right;height:500px;background:#06C;}
</style>
</head>
<body>
<div class="wrapper">
<div class="leftPanel"></div>
<div class="rightPanel"></div>
<div class="contentArea"></div>
</div>
</body>
</html>

From the above two examples, we can conclude that it is impossible to horizontally center elements in a flow layout because they are all displayed full screen. Only with a fixed layout, because of the limited width, it is possible to horizontally center the elements.
Secondly, the implementation of a fixed layout does not necessarily require the elements to be horizontally centered. The reason for doing this is to allow an even margin on both sides of the browser, rather than having a large blank space on one side, which affects the appearance.
These are all some simple knowledge, let’s get into the topic.
============================================================================
There are three ways to horizontally center an element, and I will introduce them one by one. as follows :
1. Automatic margin method .
This is the method that web designers are most familiar with. It requires setting the width of the container and setting the margin: auto style. Here is a code snippet:

Copy code

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-layout</title>
<style type="text/css">
.wrapper{width:750px;margin:0 auto;position:relative;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</style>
</head>
<body>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</body>
</html>

Through this code, we can find that this method can be displayed well in various mainstream browsers (including IE6). It is only in versions below IE6 that it does not work, and the elements are still arranged to the left. If you don't consider the problem of low version browser, then it will be the most convenient.
2. Combine text centering and automatic margins .
This method can solve the problem that versions below IE6 do not support margin:0 auto. Its usage is to set the text-align:center style in the body. The specific code is as follows:

Copy code

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position-layout</title>
<style type="text/css">
body{text-align:center;}
.wrapper{width:750px;position:relative;margin:0 auto;text-align:left;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</style>
</head>
<body>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</body>
</html>

Here, text-align:center is used as a CSS hack, because it is a text style, and it is used in the body to achieve the style of centering the element, doing something that it should not do...
3. Negative margin method .
The implementation of this method is more complicated than the previous two. It has to be used in conjunction with positioning. The specific code is as follows:

Copy code

The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>negative-margin-element-center</title>
<style type="text/css">
.wrapper{width:750px;position:relative;left:50%;margin-left:-375px;}
.contentArea{width:450px;position:absolute;top:0;left:150px;height:500px;background:#96c;}
.leftPanel{width:150px;position:absolute;top:0;left:0;height:500px;background:#999;}
.rightPanel{width:150px;position:absolute;top:0;left:600px;height:500px;background:#06C;}
</style>
</head>
<body>
<div class="wrapper">
<div class="contentArea"></div>
<div class="leftPanel"></div>
<div class="rightPanel"></div>
</div>
</body>
</html>

First, offset the container 50% to the right relative to the document. Then, set the left margin of the container to negative half of the container width to achieve horizontal centering of the element. This method has no hacks and is highly compatible, so it can perform consistently across the widest range of browsers.
The above are the three methods I know of to achieve horizontal centering of elements. They are all relatively simple, so I’ll write them down as a review and summary of your knowledge.

<<: CSS fills the parent container div with img images and adapts to the container size

>>: MySQL learning to create and operate databases and table DDL for beginners

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

Three ways to realize the horizontal centering of elements and the understanding of the concepts of fixed layout and flow layout

Summary of SQL query optimization knowledge points for MySQL tens of millions of big data

MySQL 5.7 cluster configuration steps

MySQL detailed summary of commonly used functions

Vue project implements left swipe delete function (complete code)

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

Installation method of mysql-8.0.17-winx64 under windows 10

Introduction to CSS style introduction methods and their advantages and disadvantages

VMware Tools installation and configuration graphic tutorial for Ubuntu 16.04 64-bit

A brief discussion on how to set CSS position absolute relative to the parent element

JS interview question: Can forEach jump out of the loop?

Recommend

Mysql aggregate function nested use operation

Vue installation and use

Ubuntu 18.04 does not prompt for password when installing MySQL and how to solve it

How to change password in MySQL 5.7.18

MySQL database development specifications [recommended]

Node.js implements breakpoint resume

18 Nginx proxy cache configuration tips that operators must know (which ones do you know?)

How to configure path alias for react scaffolding

Why MySQL database avoids NULL as much as possible

Summary of the style modification of the input box of type="file"

The difference and use of json.stringify() and json.parse()

In-depth explanation of MySql table, database, sharding and partitioning knowledge

Implementation of CSS equal division of parent container (perfect thirds)

Solve the problem of docker images disappearing

A question about border-radius value setting