Use CSS to vertically center the content in N ., Css

Use CSS to vertically center the content in N ., Css
It is no stranger to use css + div to horizontally center the page content. How can we vertically center the content? OK. Next we will go to the topic. It is better to use the idea we often use when doing high school math problems: Situation Analysis.1. When the height and width of the DIV to be vertically centered are known: 1.1 absolute positioning method: CSS:　　　　

    .middle-div{           width:300px;           height:200px;           position:absolute;           left:50%;           top:50%;           margin:-100px 0 0 -150px      }     .parent-div{          position:relitive;     }

 

　　 Html: 　　　　 　　　　

<Div class = "parent-div"> <div class = "middle-div"> <p> I am a highly known DIV, can I center the content vertically + horizontally? </P> </div>

 

 

This method achieves horizontal center and vertical center. However, there are many restrictions. The most significant drawback is that the absolute positioning is used, and the center DIV is separated from the stream layout. Therefore, this method is used when a center panel is popped up, in combination with jquery:

    $(".mydiv").css({               position: "absolute",                left: ($(window).width() - $(".mydiv").outerWidth())/2,                top: ($(window).height() - $(".mydiv").outerHeight())/2     });  

 

 

1.2 add DIV method:  CSS:  　　　　

    .floater{        float:left;        height:50%;        margin-bottom:-120px;    }    .middle-div{        clear:both;        height:240px;        position:relitive;        background:#eee;    }

 

　　 Html:

    <div class="floater"></div>    <div class="middle-div"></div>

 

 

 

1.3 margin: auto Method  CSS: 　　　　

    #content {        position:absolute;        top:0;        bottom:0;        left:0;        right:0;        margin:auto;         height:240px;         width:70%;          background:#eee;    }        

 

Html:

 <div id="content"> </div>

 

This method is relatively simple, unfortunately in the IE6-7 is invalid.

2. When the object to be vertically centered is a single text or image, the height and width are unknown (line-height method ):

Generally, the most concise and effective method is to set the container height to be equal to line-height. In addition, the overflow: hidden prevents unexpected events (in this case, an accident occurs when the font in the container is greater than the height of the container ).


　　CSS：

　　

    p.middle-p{            font:bold 12px/24px Helvertica,Arial,sans-serif;        overflow:hidden;    }     .demo{        height:24px;        color:#fff;        background:#a5a5a5;        font:bold 12px Helvertica,Arial,sans-serif;    }

 

　　html：

　　

<P class = "demo middle-p"> text is vertically centered in P. Remove "middle-p" from the class and see what the effect is? Add "middle-p" and set the font size to 30px to see what effect it will take after overflow is removed? </P>

 

The disadvantage of this method is that it only supports single lines. When <p> is plain text, it is compatible with various browsers. When <P> contains only images, IE7 + can center the images vertically. However, in FF, chrome and IE6 are invalid;When <p> contains images and text, it is invalid in IE6 and valid in IE7 +, FF, and Chrome.

Let's try to solve the problem of ineffective modern browsers such as FF and Chrome when only images are available. Add the following in the above CSS:

　　CSS：

    p:after{        content:',';        font-size:1px;        visibility:hidden;                   }

　　html:

　　　　

    <p class="demo middle-p">            </p>

OK! Only when the image is FF, Chrome can also be vertically centered!

3. When the objects to be vertically centered are multi-line text or other objects, the height and width are unknown:

3.1 when the container height is not fixed (padding method ):

Add CSS for containers:
　　　　

    .middle-div{          padding:20px 5px;          background:#eee;     }

    html:
　　
　　

<Div class = "middle-div"> <p> Hi, I am vertically centered in the DIV. </P> <p> Hello, I am vertically centered in the DIV. </P> <p> Hello, I am vertically centered in the DIV. </P> <p> Hello, I am vertically centered in the DIV. </P> </div> <div class = "middle-div">  </div>

 

This is the simplest method to make the container padding equal up and down. Supports various browsers.

3.2 when the container height is fixed (display: table-cell Method ):

You can still use padding, but you need to know the height of the content and accurate mathematical calculations... this is obviously not desirable.

What should I do when the container height is fixed and the content in the vertical center is multiple rows?

An effective method is to display the container: table-cell, and then use the proprietary attributes of tags such as td, th, caption: vertical-align: middle;

    CSS:
　　

    .middle-div{          display:table-cell;          vertical-align:middle;          height:500px;          background:#eee;     }

    html:

<Div class = "middle-div"> <p> I want to center vertically in a DIV with a fixed height. Can I? </P> <p> I want to center vertically in a DIV with a fixed height. Is that all right? </P> <p> I want to center vertically in a DIV with a fixed height. Is that all right? </P> </div>

 

Great! It works in IE8 +, FF, and Chrome. Unfortunately, the IE6-7 still cannot be vertically centered because the IE6-7 does not recognize the table-cell attribute and ignores it automatically.

Maybe you want to use the table layout so that it is not compatible with the IE6-7. Do not try to do this because the use of table for page layout has long been rejected. Html tags are semantic, not style. Don't be discouraged, want to let the content vertical center under the IE6-7 may wish to try this method:

    CSS:

    .parent{          height:500px;          position:relative;          background:#eee;     }     .sub-parent{          position:absolute;          top:50%;          }     .middle-div{          position:relative;          top:-50%;     }

    html:

<Div class = "parent"> <div class = "sub-parent"> <div class = "middle-div"> <p> Can I center it vertically? </P> <p> Can I center vertically? </P> <p> Can I center vertically? </P> </div>

 

This method is feasible only in the IE6-7, IE8 + and FF and other modern browsers, the effect is not satisfactory. Why? It is the top:-50% error of middle-div. Because the height of the parent container is calculated based on the height of the sub-container,-50% is invalid. Possible Solution: middle-div top:-(use JS to get the height of sub-parent/2) px.

If you know some CSS hack skills and combine the display: table-cell method above, a perfect vertical center solution will be born:

Html is the same as above;

    CSS：
　　
　　

    .parent{          height:500px;          display:table-cell;          vertical-align:middle;          *position:relative;          background:#eee;     }     .sub-parent{          *position:absolute;          *top:50%;          }     .middle-div{          *position:relative;          *top:-50%;     }

Check the effect in the browser! This method looks pretty good. If you have to find a disadvantage, it is a little more nested DIV.

When Javascript is allowed, the height of the content can be obtained dynamically, and then it can be solved by combining display: table-cell and margin-top:-(height/2) px. This avoids multi-layer nesting. For more information, see 1.1.

3.3 when the container height is fixed (display: inline-block Method)

CSS:
　　

    .parent{          height:700px;          border:1px solid #a5a5a5;            text-align:center;        }     .middle-div{          display:inline-block;          width:300px;          vertical-align:middle;          border:1px solid #f00;     }     .parent:before{          content:'';          display:inline-block;          height:100%;          vertical-align:middle;          margin-right:-0.25em;     }

　Html:

 

<Div class = "parent"> <div class = "middle-div"> <p> Can I center vertically? </P> </div>

 

Because the display: inline-block is used, it is not compatible with the IE6-7.

4. Summary

When using CSS layout, pay special attention to browser compatibility. A vertical center allows me to see the tip of the iceberg where various browsers are compatible.
To learn about vertical center, you should at least know about display, position, margin, veritcia-align, line-height, padding, float, CSS hack, etc. Isn't the knowledge realm of CSS accumulated by small issues?
The above is only part of the method, and there may be errors and omissions. please correct me ~

Css vertical center the content in the div

Another one that doesn't quite understand the page
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> center </title>
<Style type = "text/css">
# T {height: 25px; width: 100%; text-align: center; line-height: 25px ;}
</Style>
</Head>
<Body>
<Div id = "t"> center, X and Y </div>
</Body>
</Html>
Downstairs, you tell him, if there is too much content, how should we center it?

How can I use CSS to vertically center the divs in N TD s on every TD s?

Td {text-align: center; vertical-align: middle}
Td div {margin: auto ;}