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

js regular expression lookahead and lookbehind and non-capturing grouping

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

js regular expression lookahead and lookbehind and non-capturing grouping

Docker file storage path, get container startup command operation

Use html-webpack-plugin' to generate HTML page plugin in memory

Vue3 (V) Details of integrating HTTP library axios

Solution to forgetting the root password of self-built MySQL in Alibaba Cloud Linux CentOS 7.2

The meaning and calculation method of QPS and TPS of MySQL database

Why I recommend Nginx as a backend server proxy (reason analysis)

English: A link tag will automatically complete href in IE

How to use the dig/nslookup command to view DNS resolution steps

Restart the Docker service to apply the automatic start and stop command (recommended)

Recommend

Example of setting up a whitelist in Nginx using the geo module

Summary of the three stages of visual designer growth

JavaScript to achieve JD.com flash sale effect

Let's talk about the issue of passing parameters to React onClick

Deeply understand the current status of HTML5 development in mobile development

Detailed explanation of HTML basic tags and structures

Nginx proxy axios request and precautions

Xftp download and installation tutorial (graphic tutorial)

Design sharing of the download page of the Pengyou.com mobile client (picture and text)

Implementation of CSS circular hollowing (coupon background image)

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

MySQL sliding aggregation/year-to-date aggregation principle and usage example analysis

Detailed tutorial on how to publish springboot projects through docker plug-in in IDEA

HTML basic summary recommendation (text format)

Example of using UserMap in IMG