Please accept this ultimate guide to CSS element centring

Time:2021-12-2

Please accept this ultimate guide to CSS element centring

horizontally

1. Inline elements

In line element characteristics:

(1) Width and height is the height of the content and cannot be changed

(2) For margin, only the left and right directions are valid, and the up and down directions are invalid; The padding setting is effective up, down, left and right, which will expand the space

(3) It is on the same line as other elements and will not wrap automatically

(4) Inline elements can only include inline elements and cannot contain block level elements

(5) Can passdisplay:inlineConvert to inline element

Common inline elements:

Button, IMG, input, label, span, textarea, select (drop-down list)

If it is an inline element, set the parent elementtext-align:centerYou can center the elements in the line horizontally

<div class="parent">
    < span class = "child" > Center</span>
 </div>

<style>
    .parent {
      background-color: rgb(73, 40, 165);
      text-align: center; /*  Horizontal center*/
    }
    .child {
      color: #fff;
      background-color: rgb(16, 190, 16);
    }
</style>

Please accept this ultimate guide to CSS element centring

2. Block elements

Block element characteristics:

(1) It can recognize the width and height. When the width is not set, it defaults to 100%

(2) The up, down, left and right of margin and padding are effective for them

(3) Can wrap automatically

(4) Multiple block element labels are written together, and the default arrangement is from top to bottom

(5) Can pass**display:block**Convert to block elements

(6) Block level elements can contain block level elements and inline elements

Common block elements:

Div, P, UL, ol, Li, aside, h, form, table and other semantic tags

2.1 width height fixing

When the width and height are fixed, the following HTML example:

<div class="parent">
    <div class="child"></div>
</div>

<style>
    .parent {
      height: 100px;
      background-color: aqua;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
</style>

Add the following four CSS methods to achieve the effect of horizontal centering:

Please accept this ultimate guide to CSS element centring

Method 1: Margin: 0 Auto

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

Method 2: absolute + margin left

<style>
  .child {
    position: absolute;
    margin-left: -50px;
    left: 50%;
  }
</style>

Method 3: absolute + calc

The calc() function is used to dynamically calculate the length value.

  • It should be noted that a space should be reserved before and after the operator, for example:width: calc(100% - 10px)
  • Any length value can be calculated using the calc() function;
  • Calc() function supports “+”, “-“, “*”, “/” operations;
  • The calc() function uses standard mathematical operation priority rules;
<style>
  .child {
    position: absolute;
    left: calc(50% - 50px);
  }
</style>

Method 4: absolute + left + right + margin

<style>
  .child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>

2.2 variable width and height

When the width and height are irregular, the following test examples:

<div class="parent">
  < div class = "child" > test example < / div >
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
    color: #fff;
  }
</style>

The display effect of the following three methods is:

Please accept this ultimate guide to CSS element centring

Method 1: use the new transform attribute in CSS3

The transform attribute allows us to rotate, scale, move, or tilt the element.

Translate (x, y) defines a 2D transform

Translate3d (x, y, z) defines the 3D transformation

<style>
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%,0);
}

Mode 2: Flex layout

justify-contentProperty defines the alignment of items on the main axis (horizontal).

justify-contentAvailable values:

  • flex-start(default): align left
  • flex-end: align right
  • center: Centered
  • space-between: both ends are aligned, and the spacing between items is equal.
  • space-around: equal spacing on both sides of each item (similar)margin-left = margin-right)。 Therefore, the interval between items is twice as large as that between items and borders.
<style>
.child{
    display:flex;
    justify-content:center;
}
</style>

Please accept this ultimate guide to CSS element centring

Method 3: width: fit content

<style>
.child{
    width:fit-content;
    margin:0 auto;
}

fit-contentIt is given in CSS3widthA new attribute value added to the attribute, which matchesmarginHorizontal centering can be easily achieved.

Vertical center

1. Inline elements

HTML example:

<div class="parent">
  < span class = "child" > test example</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /*  Horizontal center*/
  }
  .child {
    color: #fff;
    background-color: blueviolet;
  }
</style>

Add CSS code in the following five ways to achieve the effect of vertical centering

Single line text

Set line height

<style>
.child{
    line-height:100px;
}

Please accept this ultimate guide to CSS element centring

When there are multiple lines, the style will be disordered and need to be usedvertical-align:middlelayout

Multiline text

Method 1: display: table cell + vertical align

vertical-alignProperty to set the vertical alignment of the element.

The vertical align attribute can be used in two environments:

  • Align the inline element box model vertically with its inline element container. For example, to vertically align a picture within a line of text:

    Please accept this ultimate guide to CSS element centring

  • Align table cell contents vertically:

    Please accept this ultimate guide to CSS element centring

However,vertical-alignIt only works for in row elements and table cell elements, and cannot be used to vertically align block level elements,vertical-alignProperty is only available when the parent layer istdperhapsthFor other block level elements, such asdivpEtc., which is not supported by default.

In order to usevertical-height, we need to set the parent elementdisplay:table, child elementdisplay:table-cell;vertical-align:middle;

<style>
.parent{
    display:table;
}

.child{
    display:table-cell;
    vertical-align:middle;
}
</style>

Please accept this ultimate guide to CSS element centring

Mode 2: display: inline block + vertical align implicit ghost node

Set the height of the ghost node and the baseline of the ghost node (throughline-height), to set the of the ghost nodex-height, yesspanYou can also align the center line of the ghost node with the center line of the ghost nodevertical-align:middle;Center

<!DOCTYPE html>
<html lang="en">

<body>
   
<div class="parent">
  < span class = "child" > test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example test example</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /* Horizontal center*/

    line-height: 100px; /*  Set the baseline of the ghost node through line height*/
  }
  .child {
    color: #fff;
    background-color: blueviolet;
    vertical-align: middle;
    
    line-height: normal;  /*  The key point is to set the line height to normal, otherwise it will inherit 100*/
    display: inline-block;  /*  Block level elements need to be added to make them have the characteristics of inline elements*/
     
  }
</style>
</body>
</html>

Please accept this ultimate guide to CSS element centring

Mode 3: writing mode layout

writing-modeProperty defines how text is arranged horizontally or vertically.

  • Horizontal TB: horizontal top-down writing. Left right top bottom
  • Vertical RL: vertical writing from right to left. Top bottom right left
  • Vertical LR: vertical content from top to bottom and horizontal content from left to right
  • Sideways RL: contents are arranged vertically from top to bottom
  • Sideways LR: content is arranged vertically from bottom to top
<style>
.parent{
    writing-mode:vertical-lr;
}

.child{
    writing-mode:horizontal-tb;
}
</style>

Please accept this ultimate guide to CSS element centring

Mode 4: display: grid layout

<style>
.parent{
    display:grid;
}
.child{
    margin:auto;
}

![](
https://gitee.com/xin-yue-qin…)

2. Block level elements

2.1 width height fixing

HTML example:

<div class="parent">
  <div class="child"></div>
</div>
<style>
  body {
    background-color: aqua;
  }
  .child {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
  }
</style>

Add the following CSS methods to achieve the effect of vertical centering.

Please accept this ultimate guide to CSS element centring

Method 1: absolute + margin top

<style>
.child{
    position:absolute;
    margin-left:-25px;
    left:50%;
    margin-top:-25%;
    top:50%;
}
</style>

Method 2: absolute + calc

<style>
.child{
    position:absolute;
    left:calc(50% - 25px);
    top:calc(50% - 25px)
}
</style>

Method 3: absolute + left + right + Top + bottom

<style>
.child{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto
}
</style>

2.2 variable width and height

When the width and height are different, HTML example:

<div class="parent">
  < div class = "child" > test example < / div >
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
  }
</style>

The following CSS methods can achieve the following vertical centering effect:

Please accept this ultimate guide to CSS element centring

Method 1: use the new transform attribute in CSS3

You need to set the parent to relative positioning(position:relative

<style>
.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

Mode 2: Flex layout

<style>
.parent{
    display:flex;
    height:100%;
    justify-content:center;  /* Horizontal center*/
    Align items: Center / * center vertically*/
}
</style>

Follow my princess:Xin Yifang, welcome to communicate~
Please accept this ultimate guide to CSS element centring

reference material:CSS implements n ways to center elements horizontally and vertically

Codes involved in the text:https://gitee.com/xin-yue-qin/center_style