“This is the 26th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

One, foreword

In the last article, we gave a general introduction to the CSS layout, mainly involving the following points:

  • Introduction to CSS layout, the development history of layout;
  • CSS layout skills, common layout effects, interview questions;

This article begins with the introduction of CSS layout – center layout – horizontal center layout;

Second, the introduction of horizontal center layout

Horizontal centered layout: When a child element is in a parent element and its horizontal orientation is centered;

5 ways to achieve horizontal center effect:

  • inline-block + text-alignAttributes used together;
  • table + marginAttributes used together;
  • absolute + marginAttributes used together;
  • absolute + transformAttributes used together;
  • flex + justify-contentAttributes used together;

Third, the realization of horizontal center layout

1, text/inline element/inline block level element

The principle of

  • Text-align: left; text-align: right; text-align: center;

  • Text-align controls the alignment of line content (e.g. text, inline elements, inline block-level elements) within its block-level parent element.

The sample

<style>
.parent{
  text-align:center;
}
</style>

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

Use the text-align attribute by setting text-align:center for the block-level container; , control the contents of the line to achieve horizontal center alignment effect;

advantages

Simple implementation, good readability, good compatibility;

disadvantages

  • text-alignText alignment attributes have inheritance, leading to failure;

The text alignment property set for the parent container will be inherited by the quilt element.

Horizontal centering is problematic when the child width is greater than the parent width;

2. Single block-level element

The principle of

  • Set this parameter when the child container width is fixedMargin: 0 autoThe browser automatically calculates and equalizes the remaining space in the horizontal direction to achieve horizontal center;

Note: If the upper and lower margin is also set to auto, the calculated value will be 0, resulting in invalid;

The sample

<style>
.child{
  width:100px;
  margin: 0 auto;
}
</style>

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

Margin :0 auto; , the browser will automatically calculate and evenly divide the remaining space in the horizontal direction to achieve the effect of horizontal center;

advantages

Simple implementation, good readability, good compatibility;

disadvantages

  • The child container must be fixed width and cannot be set to Auto.
  • Horizontal centering is problematic when the child width is greater than the parent width;

3. Multiple block-level elements

How can multiple block-level elements collectively be horizontally centered within the parent element?

The principle of

  • With the help oftext-alignAttribute features: Can only control text alignment (text, inline elements, inline block-level elements);
  • throughdisplay:inline-blockConverts a block-level element to an inline block and setstext-align:center, to achieve the overall horizontal centering effect of child elements;

The sample

<style>
.parent{
  text-align: center;
}
.child{
  display: inline-block;
}
</style>

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

advantages

Simple implementation, good readability, good compatibility;

disadvantages

  • The default spacing for inline block elements and inline elements is affected by the newline character.

By converting block-level child elements to inline blocks, the default spacing between two inline blocks is generated;

At this point, you can remove the default spacing by setting font size: 0 for the parent element;

However, font size: 0 also creates a new problem: the text in the child element will not be displayed because the font size is 0.

Therefore, you need to set a font size for the child element to solve the problem perfectly;

4, any element

The principle of

Using the Flex flex layout, set the alignment on the main axis to center alignment;

The sample

<style>
.parent{
  display: flex;           /* Use flex layout */
  justify-content: center; /* Set the alignment on the main axis */
}
</style>

<div class="parent">
  <div class="child">Horizontal center</div>
</div>
Copy the code
  • By setting thedisplay: flex;, using Flex layout, horizontal by default;
  • By setting thejustify-contentAttribute, can achieve multiple child elements in the parent element of the whole horizontal center effect;

advantages

  • Simple implementation, powerful function;
  • You don’t have to worry about the number of children;

disadvantages

Flex is a new responsive layout solution in CSS3 that is primarily mobile oriented,

Therefore, there are compatibility problems for PC, and Android 4.0+ is required for mobile.

5, use absolute positioning implementation

The principle of

  • Use absolute positioning: parent sets relative positioning, child sets absolute positioning;
  • throughtop,right,bottom,left, sets the size of the child element relative to the parent element.
  • throughmarginortransform, set the value corresponding to the size of the child element itself, move it in the reverse direction, and complete the horizontal centering effect;

Note: There are two ways to achieve reverse movement: margin or transform;

The sample

<style>
.parent{
  position:relative;/* Relative positioning */
}
.child{
  position:absolute;/* Absolute position */
  left:50%;
  transform:translateX(-50%);
  /* margin-left:- width of the parent element /2 */
}
</style>

<div class="parent">
  <div class="child">Horizontal center</div>
</div>
Copy the code
  • Add relative references for the parent element and set absolute positioning for the child element;
  • Set the left orientation to 50% (not center at this time), and then reverse the move so that it is geometrically right in the center to achieve horizontal center effect;

There are two ways to reverse the movement:

  • 1, set upmarginNegative value to achieve reverse movement;
  • 2. Use CSS3 to transform attributestransformHorizontal displacement, moving distance is half of the width;

Note: this kind of horizontal center scheme is also the one most used in actual projects;

advantages

Use margin-left to achieve reverse movement, good compatibility (block level, inline elements can be implemented);

disadvantages

  • Because absolute positioning is used, it can lead to disconnection from the document flow;
  • usemargin-leftNegative value to achieve reverse movement, need to know the width value;
  • Transform properties using CSS3transformReverse movement, compatibility requirements (IE 9+);

Four, the end

This paper mainly introduces the realization schemes, principles, advantages and disadvantages of five kinds of horizontal centering effects, mainly involving the following points:

  • Horizontally centered text, inline elements, and inline block-level elements;
  • Single block-level elements are horizontally centered;
  • Horizontally centered multiple block-level elements;
  • Horizontal center of any number of elements;
  • Use absolute positioning + reverse movement;

Next, CSS layout – center layout – vertical center layout;

Maintenance record

  • 20211202
    • Modify part of the statement, make the expression more accurate;