Clear float way

  1. Set overflow: Hidden to the parent

    Disadvantages: If the text is too long and contains too much English, the English text may be hidden

  2. Set the height of the parent

  3. Add an empty element to the end of the floating element to make clear. Clear :both means that it cannot have floating elements on either side

    Cons: Obviously, adding a div tag increases the rendering load of the page

  4. Clear by adding pseudo-elements to the parent

  5. Unconventional (More Than worth it)

    Set the parent to float as well; Added location absolute to the parent

Center the box (son vs. parent)Juejin. Cn/post / 684490…

One, horizontal center

1.1 Inline elements

.parent { text-align: center; } Duplicate codeCopy the code

1.2 block-level elements

1.2.1 Block-level elements are generally centered

.son { margin: 0 auto; } Duplicate codeCopy the code

1.2.2 Child elements contain float

.parent{ width:fit-content; margin:0 auto; } .son { float: left; } Duplicate codeCopy the code

1.2.3 Flex Flex Box

1) Flex 2012

.parent { display: flex; justify-content: center; } Duplicate codeCopy the code

2) Flex 2009

.parent { display: box; box-orient: horizontal; box-pack: center; } Duplicate codeCopy the code

1.2.4 Absolute Positioning

1) the transform

.son { position: absolute; left: 50%; transform: translate(-50%, 0); } Duplicate codeCopy the code

2) left: 50%

.son { position: absolute; Width: the width; left: 50%; Margin-left: -0.5* widthCopy the code

3) left/right: 0

.son { position: absolute; Width: the width; left: 0; right: 0; margin: 0 auto; } Duplicate codeCopy the code

summary

These are the eight ways in which CSS is horizontal.

Two, vertical center

2.1 Inline elements

.parent {height: height; }.son {line-height: height; } Duplicate codeCopy the code

Note: the child element is the height of the parent element. ② Single-line text.

2.2 Block-level elements

2.2.1 Intra-line block-level elements

.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; } Duplicate codeCopy the code

Adapt to IE7.

2.2.2 table

.parent { display: table; } .son { display: table-cell; vertical-align: middle; } Duplicate codeCopy the code

advantages

  • The height of an element can be changed dynamically and does not need to be defined in CSS. If the parent element does not have enough space, the element content will not be truncated.

disadvantages

  • Not valid in IE6~7 or even IE8 Beta.

2.2.3 Flex Elastic Box

1) Flex 2012

.parent { display: flex; align-items: center; } Duplicate codeCopy the code

advantages

  • The width and height of the content block are arbitrary, elegant overflow.
  • Can be used in more complex and advanced layout techniques.

disadvantages

  • Internet Explorer 8/ Internet Explorer 9 does not support this function.
  • The browser vendor prefix is required.
  • There may be some issues with rendering.

2) Flex 2009

.parent { display: box; box-orien: vertical; box-pack: center; } Duplicate codeCopy the code

advantages

  • Simple implementation and strong scalability.

disadvantages

  • Poor compatibility and does not support Internet Explorer.

2.2.4 Absolute Positioning

1) the transform

.son { position: absolute; top: 50%; transform: translate( 0, -50%); } Duplicate codeCopy the code

advantages

  • Less code.

disadvantages

  • Not supported by IE8, attributes need to be prefixed by the browser vendor, which may interfere with other transform effects and in some cases blur text or element boundaries.

2) top: 50%

.son { position: absolute; top: 50%; Height: the height; Margin-top: -0.5 height; } Duplicate codeCopy the code

advantages

  • Works with all browsers.

disadvantages

  • The child element may not be visible when there is insufficient space for the parent element (when the browser window shrinks and the scrollbar does not appear). If the child element sets Overflow: Auto, the scroll bar appears when the height is insufficient.

3) top/bottom: 0;

.son { position: absolute; top: 0; bottom: 0; margin: auto 0; } Duplicate codeCopy the code

advantages

  • Simple.

disadvantages

  • When there is not enough space, the child element is truncated, but there is no scroll bar.

summary

These are the eight ways to centralize CSS vertically and their pros and cons.

Third, summary

There are 16 methods of horizontal center and 8 methods of vertical center.

Among them,

  • flex
  • Absolute positioning

Both horizontally centered and vertically centered.