From the perspective of project requirements, use the pure CSS solution to solve vertical center and css Solution

From the perspective of project requirements, use the pure CSS solution to solve vertical center and css Solution

CSS is the scissors for HTML elements. It greatly enriches the modification of web pages. Among the many common CSS style requirements, there is a wonderful style [vertical center], because either in terms of logical implementation or normal demand, there is no reason to make this demand so difficult in practice. We often need to add additional tag elements and properties Full of hack flavor to solve the problem, but it is even more difficult when it comes to non-fixed element sizes. Alas, the days have to go through and work has to continue. Here we will summarize some pure CSS solutions from the perspective of actual needs. [Note: the demand in reality is ever-changing. Please read it according to your actual needs]

 

Vertical center of Text ContentThis is a bad street requirement, for example, it will be used on the title of a part of the page and the list of individual rows. For example:

Now let's assume that we need to vertically center a line of text in a div with a width of PX and a height of 32 px. The main effect is as follows:

The preceding HTML code is as follows:

<Div class = "box"> <span> title </span> </div>

The code for CSS implementation is as follows:

. Box {width: 400px; background-color: # ccc; color: #333; line-height: 32px;/* Main Implementation Code */}

To meet the above requirements, we can also use internal filling to solve the problem. However, this method requires you to know in advance what the default Row Height we set for the page by css reset or the browser is. Suppose it is 24px, then we subtract the 32px height from the 24px height of the default row, divide it by 2 to get 4px, and fill it with inner fill, so we can change it to this:

. Box {width: 400px; background-color: # ccc; color: #333; padding: 4px 0;/* Main Implementation Code */}

This is troublesome, but it always solves the problem.

The requirement is endless. The above is a single-line text problem. What if we want to vertically center the content of multiple lines of text? For example, a div with a width of 400px and a height of 300px:

The preceding HTML code is as follows:

<Div class = "box"> <p> Title title </p> </div>

 

You must have thought of using inner filling to solve this problem. After all, it is fixed height (the code is not included). However, if we add one more line or subtract one line, this method won't work. In this case, we can use the table feature to solve the problem;

. Box {height: 300px; width: 400px; background-color: # ccc; color: #333; display: table;/* set the parent label to table display */}. box> p {display: table-cell;/* set the sub-label as the table cell */vertical-align: middle;/* set the mode for displaying the sub-label cell content */}

This method is useless in IE7 and below, because they do not support the change of label to table, that is, display: table; and display: table-cell; of course, you can directly use the table layout. Fortunately, there are many smart people. Our front-end predecessors studied another method to implement the above content, but the html structure has changed, as shown below:

<! -- Html code --> <div class = "box"> <div> <p> Title title </p> </div> </ div> </div> <! -- Css code --> <style>. box {width: 400px; height: 300px; position: relative; background-color: # ccc; color: #333 ;}. box> div {position: absolute; top: 50%; left: 0 ;}. box> div {position: relative; top:-50%; left: 0 ;}</style>

This is only applicable to IE7 and earlier versions. With the continuous upgrade of browsers, we may not need to be compatible with such a low version of browsers.

As shown in the preceding table layout, the content in the table includes div and image. You can try this by yourself and place block-level elements and images with fixed height and width. (Note: Put the p tag in the div. In some browsers, the p tag is split into two tabs in actual display, so you can change the child element to div)

If you only want to center the image vertically, you can use the following method:

<! -- Html code --> <div class = "box1">  </div> <! -- Css code --> <style>. box1 {background-color: # ccc; line-height: 300px; width: 400px ;}. box1> img {vertical-align: middle ;}</style>

Let's take a look at the specific effect.

The above are vertical centers of text content, but there is another situation in our daily work, that is, center the box, that is, center the div. For example, it is a div with a width of PX and a height of PX:

If you are smart, you will surely use table to solve the problem. This is also a solution. We can also use location to solve the problem, for example:

. Box {height: 300px; width: 400px; background-color: # ccc; color: #333; position: absolute;/* fixed can also be used here, depending on your situation */top: 50%; left: 50%; margin:-150px 0 0-200px ;}

Or you can use the following code

/* The code is not applicable to IE7 and below */
. Box {height: 300px; width: 400px; background-color: # ccc; color: #333; position: fixed;/* fixed can also be used here, depends on your situation */top: 0; left: 0; bottom: 0; right: 0; margin: auto ;}

The above methods all require a fixed height. If we are not sure about the height of the content, how can we achieve this? The table above can be used. If your project does not need to be compatible with browsers that do not support CSS3, try the following methods:

. Box {width: 200px; background-color: # ccc; color: #333; position: fixed;/* switch to absolute */top: 50%; left: 50%; transform: translate (-50%,-50% );}

Since your project is so advanced, we can also use flexbox (telescopic box) for layout. Using this method, we do not need to specify the width. The Code is as follows:

    body {    display: flex;    min-height: 100vh;    margin: 0;    }    .box {    background-color: #ccc;        margin: auto 20px;    } 

Summary: these methods are not so perfect. The specific situation depends on the specific situation. It is said that CSS will directly use the align-self: center attribute to develop to the future; to solve the vertical center of all elements, we look forward to the arrival of that day.