Different CSS 8 ways to achieve a centered layout

If the other shore prosperousfalls, who accompany me to see the sunset fleeting

Writing in the front

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

I recently put together a series of articles over the course of half a month, using fragment time, that summarized the various layouts in CSS, as well as their implementation methods and common techniques. This series gives you a new look at CSS layouts.

This series of navigation post I enter, which can quickly jump to the article you want to know (suggested favorites)

8 ways to achieve a centered layout

1. Use the text-align attribute

If the element is an inline block-level element, that is, an element of display: inline-block, you can center it horizontally by setting text-align: center to its parent element. Sample code is as follows

The HTML code

<div class="parent">
  <div class="child"></div>
</div>
Copy the code

CSS code

.parent {
  background: #ff8787;
  /* For child display: inline-block; Text-align: center; Achieve horizontal center */
  text-align: center;
}
.child {
  display: inline-block;
  background: #e599f7;
  height: 300px;
  width: 300px;
}
Copy the code

The final result

2. Horizontally centered block-level elements of fixed width (Method 1)

Margin: 0 auto; margin: 0 auto; , but it is worth noting that the width must be set.

Example code is as follows:

.parent {
  background: #ff8787;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* Direct margin:0 auto; Can achieve horizontal center */
  margin: 0 auto;
}
Copy the code

The HTML code and renderings are the same as above

3. Horizontally centered block-level elements of fixed width (Method 2)

For elements with positioning enabled, this can be done with the left attribute and margin, as shown in the following code:

For more information about positioning, I can go to the topic’s navigation post to see how to understand position in depth

.parent {
  background: #ff8787;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* Enable positioning */
  position: relative;
  left: 50%;
  /* margin-left is half of the negative width */
  margin-left: -150px;
}
Copy the code

The HTML code and renderings are the same as above

4. Horizontally centered block-level elements of fixed width (Method 3)

When an element is positioned or fixed, the left and right attributes are set together to stretch the element’s width, and the horizontal center is achieved by combining the width and margin attributes. The sample code looks like this:

.parent {
  background: #ff8787;
  position: relative;
  height: 300px;
}
.child {
  background: #e599f7;
  height: 300px;
  /* Enable positioning */
  position: absolute;
  /* Horizontally fill the screen */
  left: 0;
  right: 0;
  /* Set the width after the screen is full, and finally achieve horizontal center through margin */
  width: 300px;
  margin: auto;
}
Copy the code

The HTML code and renderings are the same as above

5. Horizontally centered block-level elements of fixed width (Method 4)

The left and transform attributes are horizontally centered when the element is positioned or positioned. Example code is as follows:

.parent {
  background: #ff8787;
  position: relative;
  height: 300px;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* Enable positioning */
  position: absolute;
  /* This method is similar to the left-margin method, but it does not need to calculate the width manually. * /
  left: 50%;
  transform: translateX(-50%);
}
Copy the code

The HTML code and renderings are the same as above

6. Set the width to fit-Content

If the child element contains float: left; Property, to center the child element horizontally, set the parent element width to fit-Content, along with margin. Example code is as follows:

.parent {
  background: #ff8787;
  height: 300px;
  /* Compatible with multiple browsers */
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* The child element floats */
  float: left;
}
Copy the code

If the HTML structure does not change, there are the following problems:

The actual width of the parent container is the same as that of the child container.

.parent {
  background: #ff8787;
  height: 300px;
}
/* Auxiliary container */
.center {
  /* Compatible with multiple browsers */
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* The child element floats */
  float: left;
}
Copy the code

The result is what you initially wanted to achieve, but with this approach, the amount of code and the need to modify the HTML structure doesn’t make much difference in real development

7. The Flex layout

Turn on the Flex layout for the parent element, and center the layout with justify -Content: Center. Example code is as follows:

For detailed usage of the Flex layout, please refer to my entry

.parent {
  background: #ff8787;
  height: 300px;
  /* Enable Flex layout */
  display: flex;
  /* Center */ with the context-content attribute
  justify-content: center;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  Margin: auto*/
  margin: auto;
}
Copy the code

Just choose one of two ways

The HTML code and renderings are the same as above

8. The Grid layout

You can also center the Grid, but just one center is overkill. Example code is as follows:

For details on how to use Grid layout, please refer to me

.parent {
  background: #ff8787;
  height: 300px;
  /* Start Grid layout */
  display: grid;
  /* Method 1 */
  justify-items: center;
  /* Method 2 */
  justify-content: center;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  Margin: auto*/
  margin: auto;
}
Copy the code

The HTML code and renderings are the same as above

conclusion