New knowledge storeFront end from entry to groundFor attention, star and suggestions, update from time to time ~

If you think it’s good, just give it a thumbs up

This article only collates the common horizontal center, vertical center and multi-column layout, not all involved, just consider the common and can be easily used. If there are other clever solutions, please point them out in the comments and I will add them to the document in time.

All of the examples in this article are HTML rendered, without pictures and external links to the demo, so you can directly select the example to debug on the console. I recommend you to try the tips listed in this article to help deepen your understanding.

Finally, 1 like equals 100 views, tell me you've been here, seen it, and earned it!!Copy the code

Horizontal center

text-align: center;

For inline content (text, inline elements, inline block-level elements)

<div class="container">
  this is inner text
  <div classs="ele1">
    this is a block element
  </div>
  <div classs="ele2">
      this is another block element
  </div>
</div>
Copy the code
.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
}
Copy the code
this is inner text

this is a block element
this is another block element

Attributes are inherited, affecting the contents of subsequent elements;

  • Ele1’s block-level elements display text centered because they default to 100% width, the same as container,
  • The inner text of Ele2 is centered because it inherits the attribute of Container. If you want Ele2 itself to be centered, set Ele2 to centerdisplay: inline-blockConvert to inline block or settingmargin: 0 auto

Invalid if the child width is greater than the parent width

margin: 0 auto;

The target element is required to be of a fixed width and to have a margin to the left and right of the parent element.

This applies when there are multiple block-level elements in the parent element

<div class="container">
  this is inner text
  <div classs="ele2">
      this is another block element
  </div>
</div>
Copy the code
.container{
  width: 300px;
  border: 1px solid grey;
  text-align: center;
}
.ele2{
  border: 1px solid grey;
  width: 200px;
  margin:0 auto;
}
Copy the code
this is inner text

this is another block element

If margin is set to auto, the computed value is 0

Absolute positioning

Absolute positioning causes an element to be out of the document flow, and the height of the parent element needs to be handled to prevent height collapse

The values of top, right, bottom, and left are relative to the parent element size,

absolute + transform

The transform sets the percentage parameter relative to its own size

<div class="container">
   this is inner text
  <div class="ele1">
    this is a block element
  </div>
</div>
Copy the code
.container{
    height: 100px;
    width: 200px;
    position: relative;
    border: 1px solid grey;
  	text-align: center;
}
.ele1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
    width: 100px; // This is optional. The default value is half the width of the parent elementborder: 1px solid # 888;
}
Copy the code
this is inner text

this is a block element

Ele1 may not be set to width, so the width of ele1 is calculated to be half the width of the parent element – the width of the left and right border

absolute + margin

Margin sets the percentage parameter relative to the parent element, so this method requires the child element to be fixed width and set to half its own width.

Transform: translateX(-50%); margin-left: -50px;

.ele1{
    position: absolute;
    left: 50%;
    margin-left: -50px; // A negative value, set to half the width of the element itselfwidth: 100px; // It must be set hereborder: 1px solid # 888;
}
Copy the code
this is inner text

this is a block element

flex

Flex defaults the horizontal axis to the main axis and sets the alignment of the current main axis to center

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
Copy the code
.container{
    height: 200px;
    width: 220px;
    display: flex;
    justify-content: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid # 888;
}
Copy the code
this is a block element

When ele1 is not set to width and height, the child element width automatically matches the content size, and the height fills the parent element

Vertical center

vertical-align

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

Only used for horizontal alignment of elements within the same line, not for vertical centering of parent elements, as in the following example

 <div class="container">
  <div class="ele1">this is inner text</div>
  <div class="ele">inline-block</div>
</div>
Copy the code
.container{
    width: 220px;
    height: 50px;
    vertical-align: middle;
    border: 1px solid grey;
}
.ele{
   border: 1px solid grey;
   height :30px;
   display: inline-block;
}
.ele1{
  vertical-align: middle;
  display: inline-block;
}
Copy the code
this is inner text
inline-block

Ele1 supports a line by setting the height, and the ele element is vertically aligned: middle to align with ELE1. But the entire line is not aligned with the parent element.

If the parent element has no height set or the height is the same as the height of the highest element in the row, the row is centered relatively vertically with the parent element.

It is also possible to set the parent element display: table-cell to use vertical-align for table alignment, but this is not recommended

line-height

Works with single-line text, inline elements, and inline block-level elements

Multi-line text is recommended wrapped in a child element using a SPAN

<div class="container">
    this is inner text
</div>
Copy the code
.container{
    width: 220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid grey;
}
Copy the code
this is inner text

Tip:

Normally, if an unset height div has text inside it, the height of the div will be the height of the text. Text takes up space and naturally spreads the div out. But in fact, it’s not the text that spreads the div at all, it’s line-height!

If a tag does not define a height attribute (including percentage height), then the final height of the tag must be determined by line-height

To put it another way, if a text div is not set to height and its line height is set to 0, the div will not be split.

<div class="container">
  <div class="ele">
    this is inner text
  </div>
  <div class="ele1">
    this is inner text
  </div>
</div>
Copy the code
.container{
    width: 220px;
    height:100px;
    border: 1px solid grey;
}
div{
   margin-top: 20px;
   border: 1px solid grey;
}
.ele{
 line-height:0;
}
Copy the code
this is inner text
this is inner text

Therefore, for chestnuts at the beginning of this section, removing the height attribute of the container has no effect. Go to the console and try it out for yourself.

Absolute positioning

Absolute positioning causes an element to be out of the document flow, and the height of the parent element needs to be handled to prevent height collapse

The values of top, right, bottom, and left are relative to the parent element size,

absolute + transform

Transform sets the percentage parameter to be horizontally centered relative to its size, CSS is replaced by

top: 50%;
transform: translateY(-50%);  
Copy the code

absolute + margin

In the same horizontal center, replace the CSS with

top: 50%;
margin-top: -50px; // A negative value, set to half the width of the element itselfCopy the code

absolute + margin: auto

Margin = 0; margin = 0; margin = 0; margin = 0 This is when absolute positioning is not set for the child element.

Set the child element to absolute position, with top, right, bottom, and left set to 0

 <div class="container">
  <div class="ele">
    this is block element<
  /div>
</div>
Copy the code
.container{
    width: 200px;
    height: 120px;
    position: absolute;
    border: 1px solid grey;
}
.ele{
    width: 70px;
    height: 80px;
    border: 1px solid grey;
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code
this is block element

The child element must be of a certain height and width

flex

Flex defaults the horizontal axis to the main axis and sets the current vertical axis alignment to center

<div class="container">
  <div class="ele1">
    this is a block element
  </div>
</div>
Copy the code
.container{
    height: 200px;
    width: 220px;
    display: flex;
    align-items: center;
    border: 1px solid grey;
}
.ele1{
    width: 100px;
    height: 100px;
    border: 1px solid # 888;
}
Copy the code
this is a block element

writing-mode

Defines the horizontal or vertical arrangement of text and the direction of text travel in block-level elements.

You can change horizontal CSS properties to vertical ones by using the writing-mode command to change text display to vertical ones

<div class="container">
  <div class="ele1">
   block element
  </div>
</div>
Copy the code
.container{
    height: 200px;
    width: 200px;
    writing-mode: vertical-lr;
    border: 1px solid grey;
    text-align: center;
}
.ele1{
    display: inline-block;
    border: 1px solid # 888;
}
Copy the code
block element

Horizontal and vertical center

I don’t need to talk about that

Multi-column layouts

Copy the window folder layout

Applies to internal items with fixed width, and multiple items are tiled on parent elements.

  • The inner child element is fixed in width
  • Out of line wrap
  • Adaptive parent element width
<div class="parent">
  <div class="container">
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
    <div class="ele">
     element
    </div>
  </div>
</div>
Copy the code
.parent{
  box-sizing: border-box;
  border: 1px solid grey;
  width: 392px;
}
.container{
    box-sizing: border-box;
    display: flex;  
    flex-wrap: wrap;
    margin-right: -10px;
}
.ele{
    box-sizing: border-box;
    background: #ccc;
    width: 90px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    margin-bottom: 10px;
}

Copy the code
element
element
element
element
element
element
element
element
element

In the example above, multiple ele are arranged horizontally, and the number of ele displayed in each row is related to the width of the parent. Increasing or decreasing the width of the parent automatically changes the number of ele displayed in each row. Try opening the console by selecting the element.

Explanation:

  1. Container Uses Flex layout and Settingsflex-wrap: wrap;Out of fold display
  2. Width of the parent is(ele.width + ele.marginRight) * 4 - ele.marginRight, exactly four child elements are displayed per line.
  3. The arguments in the previous section can be implementedjustify-content: space-betweenEffect, but without causing the style to misplace when there are less than four lines
  4. The container itself does not set the width, but uses internal elements to spread it out and set it at the same timemargin-right: -10pxAdd 10px to the container to fit the last container in each rowele 的 marginRight

Little knowledge:

  1. Margin left and right are negative values. If the element itself has no width, the element width will be increased
  2. The element itself has a width, which causes displacement
  3. margin-topIs negative, regardless of whether the height is set, it does not increase the height, but produces an upward displacement
  4. margin-bottomNegative values do not shift, but reduce their CSS read height
  • If you need a two-column or multi-column layout, you can change it depending on the situationparent 和 eleWidth to adjust

Other layouts to be added:

  • Hierarchical layout: Talk about the CSS position property and its sticky property value
  • .

If you learn something new, or get a nice picture on the left, please give it a thumbs up

Related series: A journey of large front end foundation building from scratch

Recommended reading

  • CSS Position and its sticky attribute (” sticky “)

  • Reflow and Repaint, KFC and MC are mentioned at the same time every time. The relationship is almost as close as MC beside KFC.

  • Viewport and 1 px | tools: this is a 1 px, designer: no, I can’t, this is not a design but ready to quarrel with me

  • Front end must master “CSS cascade context” explain | handmade sample, BaoJiao package will sister with cat, what do you want?

  • Sass. Vs. Less | introduction and comparison I write simple, you simply look at how

Reference article:

  1. 1010 Ways to implement horizontal and vertical centralization of CSS
  2. Dry! All kinds of common layout + well-known site instance analysis
  3. Some in-depth understanding and application of CSS line height