Summary for you-CSS Center

I believe that all the front-end cainiao will be the same as me when they first started working, and they will receive the need to center.

There are too many CSS center posts on the Internet, but most of them do not have a good conclusion (or there are good but I have no luck)

Write one for yourself today, which is also a summary of previous work.

 

1. horizontal center 1. Align elements horizontally (use margin & width property)

Css code:

Div. h_align {border: 1px solid black; margin: 0 auto; width: 50%;/* width must be specified, either as a percentage or pixel value */}

Html code:

<Div class = "h_align"> I use margin: 0 auto! Come on ask for horizontal center! </Div>

Summary:

To use the preceding method to center horizontally, you must specify the width.

Compatibility:

Firefox \ Chrome \ Safari \ Opera \ IE 9 8 7 6

 

2. use absolute position & width)

Css code:

        div.pos{            border: 1px solid red;            position: absolute;            left: 50%;            width: 300px;            margin-left: -150px;        }

Html code:

<Div class = "pos"> I use absolute positioning! Center horizontally! </Div>

Summary:

The idea of this method is to use absolute left 50% to make the value of the negative outer margin half of the width of the element to realize Center (this idea can also be used in vertical center)

Compatibility:

Firefox \ Chrome \ Safari \ Opera \ IE 9

IE 8 and below are not compatible. I will write a parsing later

 

3. Align the elements horizontally (IE 6 \ 7 solution)

Css code:

        div.textAlign{            margin-top:100px;            text-align: center;        }        div.textAlign div{            text-align: left;            width:500px;            background-color:green;        }

Html code:

<Div class = "textAlign"> <! -- Text-align: center IE7 6 --> <div> come and come here ~~~ Text-align: center! I can only use IE6 7! </Div>

Summary:

In earlier versions of IE, text-align is used not only for text, but also for the position offset of the element itself. Therefore, in IE6 7, text-align will make the child element centered along with the text, in this case, you only need to apply text-align: left to the child element to implement horizontal center of the element.

Compatibility:

IE 7 \ 6

 

2. Vertical center 1. Vertical center of Single Line Text

Css code:

        p.single_line{            border: 1px solid green;            /*key code:*/            height: 4em;            line-height: 4em;            overflow: hidden;        } 

Html code:

<P class = "single_line"> I am a single line of text! I have a height of PX. I want to center vertically! </P>

Summary:

(1) key: make the line spacing and element height the same, so that only one line of text content can be accommodated in the container, so the text is centered.

(2) When height and line-height are set, the relative unit em is recommended, so that the center is still maintained when the font size is very large.

(3) overflow: hidden is required for the same reason.

(4) Advantage: This method is applicable to both block elements and In-row elements, and is applicable to mainstream browsers.

(5) Disadvantage: The text length is limited (a maximum of one line is allowed), and it is invalid for non-text elements.

 

2. Vertical center of multi-line text without fixed height

Css code:

        p.multi_line{            border: 1px solid gray;            width: 100px;            /*key code:*/            padding-top: 30px;            padding-bottom: 30px;        }

Html code:

<P class = "multi_line"> multi-line text! I have a width of PX but no fixed height! Beg for vertical center! </P>

Summary:

(1) key: make the top and bottom margins equal. It doesn't matter how much the value is. You can use the same top and bottom margins.

(2) Advantage: This method is applicable to both block elements and In-row elements. It can also be used for non-text elements and is applicable to mainstream browsers.

(3) Disadvantage: The height cannot be set.

 

3. Vertically center a fixed-height container simulated table layout

Css code:

        div.wrap1{            border: 1px solid black;            /*key code:*/            display:table;            height:300px;        }        div.wrap2{            /*key code:*/            display:table-row;        }        div.wrap3{            /*key code:*/            display:table-cell;            vertical-align:middle;        }        div.maincontent{            width:350px;            background-color:black;            color: white;            /*key code:*/            height:90px;/* less than wrap1.height */                    }

Html code:

<Div class = "wrap1"> <div class = "wrap2"> <div class = "wrap3"> <div class = "maincontent"> my dad is 300px tall, I am 350X90 px, and can also be centered. Wow, haha, but don't watch me in IE6/7. </div> <! -- Other content --> </div>

Summary:

(1) key: Use table, table-row, and table-cell in the display attribute to simulate an element into a table layout. All elements in wrap3 are vertically centered, but their total height cannot exceed the height of wrap1

(2) When using display: table-cell, you must use the display: table

(3) Disadvantage: it cannot be implemented in IE6/7.

 

4. Solutions for IE7 and below

Css code:

        div.IE7wrap1{            border: 1px solid pink;            /*key code:*/            height: 300px;            position: relative;        }        div.IE7wrap2{            /*key code:*/            position: absolute;            top: 50%;            left: 0;        }        div.IE7maincontent{            width:350px;            background-color:black;            color: white;            height: 90px;            /*key code:*/            position: relative;            top:-50%;            left: 0;        }

Html code:

<Div class = "IE7wrap1"> <div class = "IE7wrap2"> <div class = "IE7maincontent"> Hey guys, I am an IE6/7 solution, I want to use IE6/7, or I am ugly. </div>

Summary:

(1) It is regarded as a css hack and serves IE6/7.

 

Iii. Summary

The accumulated experience during work, as well as the excerpt of online materials, is summarized into this blog. If it is helpful to you, please recommend.

Mutual encouragement.