Discuss various centering methods in CSS_CSS/HTML

today we will mainly talk about various centering methods in css.
the first is to center horizontally. the easiest way is of course

copy code the code is as follows:

margin:0 auto;

that is, set the margin-left and margin-right properties to auto to achieve the horizontal centering effect.

what about other ways? let me go through them one by one:

line-height

first introduce the horizontal centering method of text:

copy code the code is as follows:

liu fang

div>

use line-height to be the same as height:

copy code the code is as follows:

.wrap{
line-height: 200px;/*vertical center key*/
text-align:center;

height: 200px;
font-size: 36px;
background-color: #ccc;
}

the effect is as follows:

padding

use padding and background-clip to achieve horizontal and vertical centering of divs:

copy code the code is as follows:

by setting backgroun-clip to content-box, crop the background to the outer edge of the content area, and then use padding to set it to half the difference between the outer div minus the inner div:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

the effect is as follows:

margin filling

next, we will introduce the method of margin filling to achieve horizontal and vertical centering.
first we define the parent-child div:

here we set the margin-top of the child div to the height of the parent div minus half the height of the child div, and then set the overflow to hidden to trigger the bfc of the parent div. the less code is as follows:

@parentwidth:200px;
@childrenwidth:50px;
.parent {
 margin:0 auto;
 height:@parentwidth;
 width:@parentwidth;
 background: red;
 overflow:hidden;/*触发bfc*/
}
.children {
 height:@childrenwidth;
 width:@childrenwidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentwidth - @childrenwidth) / 2;
 background:black;
}

the final centering effect is as follows:

absolute positioning

use position:absolute with top, left 50%, and then set the margin to a negative value to center the div horizontally and vertically. first, you still need to define the parent and child divs:

copy code the code is as follows:

then set the corresponding css:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute; 
 left:50%; 
 top:50%; 
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

the value in margin is half of the width of the div. the final rendering is:

text-align centered

as we all know, text-align can center the content in a div horizontally. but what if you want to center the child div in this div? you can set the display of the child div to inline-block.

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

center the image

generally, the centering of pictures is the same as text-align. the picture is packaged in a div and the text-align of the div is set to center.
you can refer to the link below:
personal site

there is a special way to use an image as a placeholder to allow the parent container to obtain the height and width, so that the image with a -50% offset can have a reference container for percentage calculation. the advantage is that you don’t know the size of the image, and you can place any image that does not exceed the size of the parent container and it will be centered. in addition, the compatibility is good, and ie6 is smoothly compatible. the code is as follows:

copy code the code is as follows:

http://nec.netease.com/img/s/1 .jpg" alt="" />
http://nec.netease.com/img/s/1 .jpg" alt="" />

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

the effect is as follows:

transform centered

in the example of centered div mentioned above, the width of the div is fixed. however, in actual projects, it is possible to encounter divs with variable widths, especially in responsive or mobile designs, which are more common. so here’s a method to center divs horizontally and vertically that doesn’t require a fixed width.
first the code:

copy code the code is as follows:

i am centered horizontally and vertically!

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

the effect is as follows:

first, we use float to shrink the width of the parent div of the div that needs to be centered, that is, children, and then left:50% to align the left side of children with the horizontal midline. at this time, it is not really centered yet. we need to move the children-inner left by -50% so that it is horizontally centered.
let's talk about the vertical direction. first set the top of children to 50%, and then align its top edge with the vertical center line. similarly, we need to move the children-inner upward by -50%. but this 50% cannot be calculated, so we use transform: translate3d(0, -50%, 0);
this method is very easy to use.

flex centered

finally, let’s introduce the horizontal and vertical centering method implemented by display:flex in css3.

copy code the code is as follows:

i center it horizontally and vertically through flex!

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

the effect is as follows:

this method is the simplest, but the compatibility is not good, but as time goes by, all major browsers will be compatible.

the above is the entire content of this article, i hope you all like it.