Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the ways to center css horizontally and vertically". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to center css horizontally and vertically".

Unless otherwise noted, the following example html is:

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;}

Horizontal center

Margin method

Three conditions need to be met:

Element width

Element sets the display:block for block-level or inline elements

Both margin-left and margin-right of the element must be set to auto

One of the three conditions is indispensable.

Demo

. md-main {margin: 0 auto;}

Positioning method

Three conditions need to be met:

Element width

Element absolute positioning, and set left:50%

The negative left margin of the element margin-left is half the width

Demo1

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

Sometimes our element width may not be fixed, don't worry, we can still use positioning method to achieve horizontal center, this time we need to use the translate in the transform attribute in css3, which can make the element move relative to its own width and height.

It is important to note that this approach requires IE9+ to implement.

Demo2

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

Text horizontal center

For single-line text, you can simply use text-align: center.

Multiline text can be thought of as a block-level element reference margin method and location method.

Vertical center

Positioning method

Similar to horizontal centering, except that the left:50% is replaced with a negative margin of top:50%, and the transform property is changed accordingly.

Advantages: can work under various browsers, simple and clear structure, no need to add additional tags.

Demo1

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

Use the clac () property in css3 to simplify part of the code:

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

Demo2

. md-warp {position: relative;}. Md-main {position: absolute; top: 50%; / / Note that the md-main is not set to 100px-webkit-transform: translate;-ms-transform: translate (0mai 50%);-o-transform: translate (0Lay 50%); transform: translate (0Mae 50%);}

Single-line text is vertically centered

Two conditions need to be met:

The content of the element is a single line, and its height is fixed.

Set its line-height to the same value as height

This is a text div {width: 400px; height: 300px; border: 1px solid # 000;} span {line-height: 300px;}

These are some general approaches, followed by examples that take advantage of the new features of CSS3.

Solution for window units (vertically centered)

If we want to avoid absolute positioning, we can still use the translate method, which is exactly half the width and height of the meta. But how can we move the element from top and left by 50% offset without using top and left?

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

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

The effect is as follows:

We found that the expected results did not occur because the percentage calculation 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, it can be saved. CSS3 defines a new unit called the relative window length unit.

The following excerpt is from w3cplus

Vw is relative to the width of the window. Contrary to your expectations, 1vw is equivalent to 1% of the window width, not 100%

Similar to vw, 1vh is equivalent to 1% of the window height

If the width of the window is less than the height, 1vmin equals 1vw, on the contrary, if the width of the window is greater than the height, 1vmin equals 1vh

If the width of the window is greater than the height, 1vmax equals 1vw, on the contrary, if the width of the window is less than the height, 1vmax equals 1vh

Based on the previous example, we need to set vh units for margin:

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

Note: the biggest limitation of this method is that it can only be applied to the vertical center of the element in the window, and there is nothing you can do if it is in a local place.

The solution of Flexbox

Without considering the compatibility of browsers, Flexbox is undoubtedly the best solution, because it is designed to solve such problems.

You only need two styles to do this, setting display:flex on the parent element that needs to be centered horizontally and margin:auto on the element that is centered horizontally and vertically.

. md-warp {display:flex;}. Md-main {margin: auto;}

The implementation of Flexbox to center the text horizontally and vertically is also simple.

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

Add:

Inline-block works with pseudo-class solutions. 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;}

Horizontal and vertical centering of unknown size elements to achieve detailed explanation

First of all, to understand that vertical alignment typesetting requires the use of vertical-align, and only applies to inline level, inline-block level and table-cells elements Secondly, the alignment of vertical-align is based on each line box (line frame). To put it simply, an inline level element typesetting a line horizontally according to Normal flow will form a line box, its height is formed by the content, if it wraps, it is another line box, all a section of text may be distributed in multiple line box, these non-overlapping line box are called a vertical stack of line boxes (a vertically stacked wireframe collection).

In other words, our vertical centering is handled in each line box. In the above example, we want to center a line of text vertically in a high-100px container called demo. The problem is that the demo container is not the line box of the line of text, so defining vertical-laign as middle cannot center the line of text vertically in the demo container. We know that the height of the line box is formed by the content, so we can create an additional element that is in the same line box as the text of the line, and define the height of the new element as the same as the demo container, so that the height of the line box will be the same as that of the demo, and the text will be centered vertically in the line box, that is, it will also be centered vertically in the demo container.

Absolute vertical center .md-warp {position: relative;}. Md-main {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}

It is commonly used in the positioning of pop-up layers.

Thank you for your reading, the above is the content of "what is the way of horizontal vertical center of css". After the study of this article, I believe you have a deeper understanding of what is the way of horizontal vertical center of css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.