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
pclass="wrap">
pclass="center"> p>
p>
##CSS Code
## /**css**/
.wrap {200px;height:200px;background:yellow;position:relative;##} .wrap .center{
width;height:100px;background:green;margin:auto;position:absolute;left: 0;rightright: 0;top: 0;bottombottom: 0;}
XML/HTML Code
Copy content to clipboard
<
p="wrap"><
p="center"> p>
pCopy content to clipboard
/*&/.wrap{
width;height:200px;background:yellow;display:table-cell;vertical-align:middle;text-align:center;
} .center{display:inline-block;vertical-align:middle;width:100px;height:100px;background:green;
}
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
#
pclass="wrap">
pclass="center"> p>##
>
Copy content to clipboard
##/* css */.wrap {
position;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;}
##XML/HTML Code
Copy content to clipboard#
pclass
=>##<pclass=
"center"p>## p>
##CSS Code
/* css */.wrap {background:yellow;width:200px;height:200px;display: flex; align-items:center;justify-content:center;
} .center{background:green;width:100px;height:100px;
}
Mobile preferred
Method five:display :flex;margin:auto
XML/HTML CodeCopy content to clipboard
##
pclass="wrap">
pclass="center"> p> ;##
>
CSS Code
/* css */
:yellow;width:200px;height:200px;display: flex;} .
center:green;width:100px;height:100px;margin:auto;}
Preferred method for mobile terminal
Pure position
XML/HTML Code
##
##<
p="wrap">##<p
"center"> p>## p
>CSS Code
/* css */.wrap {background:yellow;width:200px;height:200px;position:relative;
}/**method one**/.center{background:green;position:absolute;width:100px;height:100px;left:50px;top:50px;
}/** Method Two**/.center{background:green;position:absolute;width:100px;height:100px;left: 50%;top: 50%;margin-left:-50px;margin-top:-50px;
}
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
<pclass="table">
<pclass="tableCell">#=
"content"No fixed width and height, adaptive p>## p>
p>
##CSS Code
.table {
height
200px;/*The height value cannot be less*/width
:/ *The width value cannot be less*/display: table;position:relative;float:left;background:yellow;
} .tableCell {display:table-cell;vertical-align:middle;text-align:center;
:*top: 50%;
*} .
*
relative;
top: -50%;
*background:green
;}
##XML/HTML Code
Copy content to clipboard
#
##<
p="wrap"
>##<pclass="center">
p>## p>
##CSS CodeCopy content to clipboard
##/* css */
.wrap {yellow
;
:200px;height:
200px: flex; align- items:center;justify-content:center;##} .center{background:green;width:100px;height:100px
;}Or display:flex;margin:auto;
XML/HTML Code##<
class="wrap"
><
class="center"> p
>p>
CSS CodeCopy content to clipboard
##/* css */.wrap {background:yellow;width:200px;height:200px;display: flex;
{background:green;width:100px;height:100px;margin:auto;
Copy content to clipboard
pclass="wrap"><
pclass="center"> p>
p>
CSS Code
Copy content to clipboard
background:yellow;width:200px;height:200px;position:relative;##}
/**method one**/{background:green;position:absolute;width:100px;height:100px;left:50px;top:50px;
}
/**Method Two**/{background:green;position:absolute;width:100px;height:100px;left: 50%;top: 50%;margin-left:-50px;margin-top:-50px;}
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.
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!