Be familiar with horizontal center and vertical center, for no other reason than to be able to use them easily. Let’s get straight to the point. Text: 16 ways to achieve horizontal center vertical center

Horizontal center

1) If it is an in-line element, set text-align:center to its parent element to realize the horizontal center of the in-line element.

2) For block-level elements, set margin:0 auto for this element.

3) If the child element contains the float:left attribute, in order to center the child element, you can set the parent element width to fit-content, and with margin, as follows:

.parent{
      width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}Copy the code

Fit-content is a new attribute value added to the width attribute in CSS3. It can easily achieve horizontal center with margin. Currently, only Chrome and Firefox are supported.

4) Using flex 2012 layout, you can easily achieve horizontal center, child elements are set as follows:

.son{
    display: flex;
    justify-content: center;
}Copy the code

5) Use flex 2009 version, parent element display: box; box-pack: center; Set as follows:

.parent {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    display: -o-box;
      -o-box-orient: horizontal;
      -o-box-pack: center;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
}Copy the code

6) Using the transform attribute newly added in CSS3, the child elements are set as follows:

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

7) Using absolute positioning and negative margin-left, set the child elements as follows:

.son{
    position:absolute;
    width: fixed;left:50%;
    margin-left: -0.5The width; }Copy the code

8) Use absolute positioning and left:0; right:0; margin:0 auto; The child elements are set as follows:

.son{
    position:absolute;
    width: fixed;left:0;
    right:0;
    margin:0 auto;
}Copy the code

Vertical center

Single-line text

1) If the element is a single line of text, you can set line-height to equal the height of the parent element

Inline block-level elements

2) If the element is an in-line block-level element, the basic idea is to use display: inline-block, vertical-align: middle and a pseudo-element to keep the content block in the middle of the container.

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

This is a very popular approach and also adapted to IE7.

The elements are highly variable

3) The vertical-align attribute is available. Vertical-align is valid only if the parent is td or th. It is not supported by default for other block-level elements such as div, p, etc. To use vertical-align, we need to set the parent element display:table, the child element display:table-cell; vertical-align:middle;

advantages

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

disadvantages

It is invalid in IE6~7 and even IE8 beta.

4) Flex 2012 is the future of CSS layout. Flexbox is a CSS3 addition designed to solve common layout problems such as vertical center. Related articles such as the Flex Guide to Elastic Box Models

The parent element ensures that the child element is vertically centered by doing the following:

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

advantages

  • Content blocks can be arbitrarily wide or high, and overflow gracefully.
  • Can be used in more complex advanced layout techniques.

disadvantages

  • IE8 / Internet explorer does not support
  • Browser vendor prefix is required
  • There may be some problems with the rendering

5) Use Flex 2009.

.parent {
      display: box;
      box-orient: vertical;
      box-pack: center;
}Copy the code

advantages

Simple implementation, strong scalability

disadvantages

The compatibility is poor and IE is not supported

6) Transform, set the parent element’s position:relative, and the child element’s CSS style as follows:

.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); }Copy the code

advantages

Less code

disadvantages

Not supported in IE8. Attributes require browser vendor prefixes, which can interfere with other transform effects. In some cases, blurred text or element boundaries can be rendered.

Fixed element height

7) Set the relative position of the parent element and the child element as follows:

.son{
    position:absolute;
    top:50%;
    height: fixed;margin-top: -0.5Height; }Copy the code

advantages

Works on all browsers.

disadvantages

When the parent element runs out of space, the child element may not be visible (when the browser window shrinks and the scroll bar does not appear). If the child element is set to Overflow :auto, the scrollbar will appear when the height is insufficient.

8) Set the parent element’s position:relative, and the child element’s CSS style as follows:

.son{
    position:absolute;
    height: fixed;top:0;
    bottom:0;
    margin:auto 0;
}Copy the code

advantages

simple

disadvantages

When there is not enough space, the children are truncated, but there is no scrollbar.

conclusion

Text-align :center,marin:0 auto; text-align:center,marin:0 auto; sufficient

  • (1) the text – align: center;
  • (2) the margin: 0 auto;
  • (3) width: fit – the content;
  • (4) the flex
  • (5) the box model
  • 6. The transform
  • ⑦ ⑧ Two different absolute positioning methods

Vertical center, provides a total of 8 methods.

  • ① Single-line text, line-height
  • Display: inline-block, vertical-align: middle; Add pseudo elements to assist implementation
  • (3) vertical – align
  • (4) the flex
  • (5) the box model
  • 6. The transform
  • ⑦ ⑧ Two different absolute positioning methods

We found that Flex, box model, Transform, and absolute positioning work for both horizontal and vertical center.

I hope it helps.

If you have any questions or good ideas, please feel free to leave a comment below.

Louis

This paper links: louiszhai. Making. IO / 2016/03/12 /…

Refer to the article

  • Check out 8 KINDS of CSS to achieve vertical center horizontal center absolute positioning center technology – Freshlover column – blog channel – CSDN.NET
  • Designing CSS Layouts With Flexbox Is As Easy As Pie — Smashing Magazine
  • Six implementation elements horizontal center _ horizontal center, vertical center tutorial _ desert