We put a man on the moon 44 years ago, and we still don’t do a good job of centralizing horizontally and vertically in CSS.

Author: Icarus links: the original XDLRT. Making. IO / 2016/12/15 /…

There are similarities and differences between horizontal and vertical center, and the common ways are discussed next.

Unless otherwise specified, the following sample HTML is:

<div class="md-warp">
    <span class="md-main"></span>
</div>Copy the code

The basic style is:

.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}Copy the code

Horizontal center

Margin method

Three conditions need to be met:

• Element fixed width
• Element is set for block-level elements or inline elementsdisplay:block
• Elements of themargin-leftandmargin-rightBoth must be set to Auto
  
  All three conditions are indispensable.

demo:

.md-main{
    margin: 0 auto;
}Copy the code

Positioning method

Three conditions need to be met:

• Element fixed width
• Element is absolutely positioned and setleft:50%
• Element with negative left marginmargin-leftIs half the width

demo1:

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    left: 50%;
    margin-left: - 50px;
}Copy the code

Sometimes the width of the element may not be fixed, so don’t worry, we can still use positioning to achieve horizontal center. In this case, we need to use the Transform property translate in CSS3 to make the element move relative to its width and height. Note that this approach requires IE9+ to implement.

demo2

.md-warp{
    position: relative;
}
// Note that md-main does not set width to 100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(- 50%,0);
    -ms-transform: translate(- 50%,0);
    -o-transform: translate(- 50%,0);
    transform: translate(- 50%,0);
}Copy the code

Text level center

For single-line text, use text-align: center. Multi-line text can be seen as a block-level element reference margin method and positioning method.

Vertical center

Positioning method

This is similar to horizontal center, except that top:50% is replaced with left:50%, and the negative margin and transform properties are changed accordingly.

Advantages: Works in all browsers, simple structure, no need to add additional tags.

demo1:

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    Core / * * /
    top: 50%;
    margin-top: - 50px;
}Copy the code

Using the CLAC () attribute in CSS3 simplifies some of the code:

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    Core / * * /
    top: calc(50% - 50px);
}Copy the code

demo2

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // Note that md-main does not set height to 100px
    -webkit-transform: translate(0.- 50%);
    -ms-transform: translate(0.- 50%);
    -o-transform: translate(0.- 50%);
    transform: translate(0.- 50%);
}Copy the code

A single line of text is vertically centered

Two conditions need to be met:

• Element content is a single line and its height is fixed.
• itline-heightSet up andheightThe value of the same

<div><span>This is a text</span></div>Copy the code

div{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}Copy the code

These are some general approaches, followed by an example using the new features of CSS3.

Solution for Windows unit (vertical center)

If we want to avoid absolute positioning, we can still use the translate() method, whose value is exactly half the width and height of the element. But how do we move elements 50% offsets from top and left without using top and left?

The first thing that comes to mind is to give the margin attribute a percentage, like this:

.md-main{
    margin: 50% auto 0;
    transform: translateY(- 50%);
}Copy the code

The effect is as follows:

We find that the expected result does not occur because the percentage of margin is calculated relative to the width of the parent container, even including margin-top and margin-bottom.

If we still want to center the element in the window, we can still save it. CSS3 defines a new unit called the relative window length unit.

The following excerpt from W3Cplus VW is relative to the width of the window. Contrary to what you might expect,1vw is equal to 1% of the window width, not 100% and similarly, 1vh is equal to 1% of the window height if the window width is less than the height, 1vmin is equal to 1VW if the window width is greater than the height, 1vmax is equal to 1vw, whereas if the window width is smaller than the height, 1vmax is equal to 1vh

Building on the previous example, we need to set the vH unit for margin:

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(- 50%);
}Copy the code

Note: The biggest limitation of this method is that it only works if the element is vertically centered in the window, not if it is localized somewhere.

Flexbox’s solution

Regardless of browser compatibility, Flexbox is definitely the best solution, because that’s exactly what it’s designed to do.

To do this, just set display:flex on the parent element that needs to be centered horizontally and margin: Auto on the parent element that needs to be centered horizontally.

.md-warp{
    display:flex;
}
.md-main{
    margin: auto;
}Copy the code

Flexbox’s implementation of horizontal and vertical centering of text is also simple.

.md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}Copy the code

Supplement:

Inline-block with pseudo-class solution

.md-warp{
  font-size: 0;
}
.md-warp:before{
  content:' ';
  display:inline-block;
  width: 0;
  height:100%;
  vertical-align:middle;
}
.md-main{
  display:inline-block;
  vertical-align:middle;
  font-size: 14px;
}Copy the code

Quotations from demo.doyoe.com/css/alignme… Use vertical-align and apply only to inline level, inline-block level and table-cells. The vertical alignment is based on each line box. Simply put, an inline level element will form a line box in Normal flow. The height of the line box is determined by the content. It is another line box. All a piece of text may be distributed in multiple line boxes. These non-overlapping line boxes are called a vertical stack of line boxes (a collection of vertically stacked wirefraps). In other words, our vertical center is processed in each line box. In the example above, we wanted to center a line of text vertically in a 100px tall container called Demo. The problem is that the demo container is not a line box for the line of text, so if we define vertical-laign as middle, it will not center the line vertically in the Demo container. We know that the height of the line box is formed by the content. In this case, we can create an additional element in the same line box as the text in the line box, and define the height of the new element as the same as the demo container. At this point, the height of the line box will be the same as the demo, and the text will be vertically centered in the line box. It also implements vertical center in the Demo container.

Absolutely vertical centered

.md-warp{
  position: relative;
}
.md-main{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}Copy the code

Commonly used in pop-up layer positioning.

conclusion

• Absolute positioning is usually not a good choice because it has a huge impact on the overall layout.
• In some browsers, the element may appear slightly blurred because it may be placed at half a pixel. We can get throughtransform-style:preserve-3dBut this is a Hack and there is no guarantee that it will not become obsolete.

A little combination of the above methods can be achieved at the same time horizontal and vertical center, these are usually used more in some of the middle method, I hope you have a harvest after reading 🙂