7 ways to center containers horizontally and vertically with css

This article mainly introduces in detail the 7 ways of using CSS to center the container horizontally and vertically. It has certain reference value. Interested friends can refer to

This kind of CSS layout is usually used. There are quite a lot of them, and it is also a question that often comes up in interviews. You will find a lot of them after searching online, but I still want to summarize them myself.
There are many methods of this kind. This article only summarizes a few of them to deepen the impression.
The renderings are all like this:

Method 1: position plus margin

# #XML/HTML CodeCopy content to clipboard

1. ##<

   p class ="wrap">

##<

2. p class="center">p>

   p>

##CSS Code

Copy content to clipboard

## /**css**/

.wrap {

width
1. :

   200px; height: 200px; background : yellow; position: relative; ##} .wrap .center {

   width
:
2. 100px

   ; height: 100px; background: green; margin: auto; position: absolute; left: 0; rightright: 0; top: 0; bottombottom: 0; }

Compatibility: supported by all major browsers, but not supported by IE6

3. Method 2:
diaplay:table-cell

XML/HTML Code

Copy content to clipboard

1. <

   p
2. class

   ="wrap"> <

   p
3. class

   = "center">p>

   p
4. >

CSS Code

Copy content to clipboard

/*&/ .wrap{

width

:
1. 200px

   ; height: 200px; background: yellow ; display: table-cell; vertical-align: middle; text-align: center;

2. } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background : green;

3. }

Compatibility: Due The reason for display:table-cell is that IE67 is not compatible

Method three: position plus transform

XML/HTML CodeCopy content to clipboard

1. #

2. ##<

   p class="wrap">

##<

3. p class="center"> p> ##

4. p

   >

##CSS Code

Copy content to clipboard

##/* css */ .wrap {

position

:
1. relative

   ; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px; }

Compatibility: Transform is not supported under IE9 and below, and the mobile version performs better.

3. Method 4:
flex;align-items: center;justify-content: center

##XML/HTML Code

Copy content to clipboard

#

##<

1. p class

   =
"wrap"

2. > ##​ <p class=

   "center"
3. >

   p> ## p>

4. ##CSS Code

Copy content to clipboard

5. 1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify -content: center;

   2. } .center { background: green; width: 100px; height: 100px;

   3. }

   Mobile preferred

   Method five: display :flex;margin:auto

   
   

   XML/HTML CodeCopy content to clipboard

   1. ##

   2. ##<

      p class="wrap">

##<

6. p class="center">p> ; ##

7. p

   >

CSS Code

Copy content to clipboard

/* css */

.wrap {
1. background

   : yellow; width: 200px; height: 200px ; display: flex; } .

   center
{
2. background

   : green; width: 100px; height: 100px; margin: auto; }

4. Preferred method for mobile terminal

Six:

Pure position

XML/HTML Code

Copy content to clipboard

##

1. ##<

   p
2. class

   ="wrap"> ##<p

class
3. =

   "center">p > ##p

   >

5. CSS Code

Copy content to clipboard

1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;

2. } /**method one**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;

4. } /** Method Two**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;

5. }

Compatibility: Applicable to all browsers

Calculation formula for method one in method six As follows:
The left value calculation formula of the child element (conter): left=(width of the parent element - width of the child element) / 2=(200-100) / 2=50px;
Child element (conter) The top value calculation formula: top=(height of parent element - height of child element) / 2=(200-100) / 2=50px;
Method 2 calculation formula:
The left value is fixed at 50%;
The margin-left of the child element= -(width of the child element/2)=-100/2= -50px;
The top value is the same, fixed at 50%
The margin-top= of the child element -(Height of child element/2)=-100/2= -50px;

Method 7:Compatible with lower version browsers, no fixed width and height

XML/HTML CodeCopy content to clipboard

2. <p class="table">

3. <p class= "tableCell">                                                         #=

   "content"
4. >

   No fixed width and height, adaptivep> ##     p>  

5. p>

6. ##CSS Code

Copy content to clipboard

##/*css*/

.table {
height

:

200px;/*The height value cannot be less*/ width

:

200px
1. ;

   / *The width value cannot be less*/ display: table; position: relative; float:left; background: yellow;

2. } .tableCell { display: table-cell; vertical-align: middle; text-align: center;

   :
10px
3. ;

   *top: 50%;

   *
left
4. : 50%;
   } .
content
5. {
   *
position
6. :

   relative;

7. *

   top: -50%;

   *
left
8. : -50%;

   background: green

   ;

9. }

10. To summarize the above seven methods for now, there are too many methods. In fact, as long as you are used to one or two of them, it will be enough.

Summary

11. If it is a mobile terminal, then it is more convenient to use methods four and five. It also supports non-fixed width and height, which is fast, accurate and ruthless
That is, use flex; align-items: center; justify-content: center;

##XML/HTML Code

Copy content to clipboard

#

##<

p

1. class

   ="wrap"

   >

2. ##​ <p class="center">

p> ## p>

3. ##CSS Code Copy content to clipboard

4. ##/* css */

   .wrap {
background:

yellow
;

width

: 200px; height:

200px
;
1. display

   : flex; align- items: center; justify-content: center; ##} .center { background: green; width: 100px; height: 100px

   ;

2. } Or display:flex;margin:auto;

   XML/HTML Code
3. Copy content to clipboard

##<


p

class="wrap"

>

1. <
2. p

   class ="center">p

   >

3. p>

CSS CodeCopy content to clipboard

1. ##/* css */ .wrap { background: yellow; width: 200px; height: 200px; display : flex;

##} .
2. center

   { background: green; width: 100px; height: 100px; margin: auto;

}
If it is a PC version, compatibility must be considered. Method six is ​​good, that is, pure position.




XML/HTML Code

Copy content to clipboard

##<

2. p class="wrap"> <

3. p class ="center">p>

   p>


CSS Code

Copy content to clipboard

/* css */
1. .wrap {

   background: yellow; width: 200px; height: 200px ; position: relative; ##}

   /**method one**/
.
2. center

   { background: green; position: absolute; width: 100px ; height: 100px; left: 50px; top: 50px; ​ ​

3. }  

   /**Method Two**/
.
4. center

   { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:- 50px; margin-top:-50px; }

6. If the height of the middle element on the PC side is not fixed, then just use method seven, and the code will not be copied.

If we really want to sum up the vertical css elements, there should be more than ten or twenty types. However, it is not necessary to master them all, as long as you have a general understanding and there are no side effects when using them.

The above is the detailed content of 7 ways to center containers horizontally and vertically with css. For more information, please follow other related articles on the PHP Chinese website!