It's easy to learn these methods to center css
May 04, 2021 CSS
Table of contents
When we use CSS
to lay out, we often need to center, sometimes a property can be done, sometimes it takes some skill to
be compatible with all browsers, the
use of CSS to achieve vertical centering of objects has many different methods, it is difficult
to choose which correct method. F
or
example,
margin:0 auto;
The style of allows the element to be centered horizontally,
margin: auto;
but can't do vertical centering. .
ed.
The first is horizontal, and the easiest way, of course, is to:
margin:0 auto;
That is,
margin-left
和
margin-right
auto
to auto for horizontal centering.
The horizontal centering method of text:
line-height
to make
height
same as height:
.wrap{
Line-height: 200px; / * Vertical Critical Critical * /
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}
Try it out . . .
Padding fill
padding
and
background-clip
achieve div's horizontal vertical centering:
background-clip
content-box
crop the background to the outer edge of the
padding
and then use padding to set the outer div minus half of the difference between the inner div, to achieve:
.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
Background-clip: Content-Box; / * Critical key * /
Try it out . . .
Tip: You
can refer to the
CSS padding property section for the use of
padding
hacks, hacks (tips)
There are
hacks
negative
margin
shadow
: : before
and so on.
If your content isn't a fixed size, most of them are fragile.
translate(-50%,-50%)
Use
position
plus
translate(-50%,-50%)
It's odd that the percentage calculation is not based on the parent element, but on yourself.
Example:
#ex3_content{
left:50%; top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray; color:white; position:absolute; }
Try it out . . .
This technique is quite aggressive and also applies to content of no fixed size,
min-width
max-height
overflow:scroll
etc.
Absolute positioning is centered
The position of the absolutely positioned element relative to the most recently positioned ancestor element, and if the element does not have a positioned ancestor element, its position is relative to the original containing block.
父容器元素：position: relative
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Try it out . . .
Note: Height must be defined and it is
overflow: auto
to prevent content from overflowing.
The view port is centered
Content elements:
position: fixed
,
z-index: 999
remember the parent container
position: relative
.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}
Try it out . . .
Responsive
Percentage width and height, maximum and minimum width can be, plus
padding
be
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Try it out . . .
Offset
As long
margin: auto;
In , the content block will be centered
top
left
bottom
right
can set the offset.
.Absolute-Center.is-Right {
width: 50%;
height: 50%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: auto; bottom: 0; right: 20px;
text-align: right;
}
Try it out . . .
Overflow
Prevent overflow when the centered content is higher than the parent
overflow: auto
(you can also add max-height: 100% when there is no
padding
max-height: 100%;
）。
.Absolute-Center.is-Overflow {
width: 50%;
height: 300px;
max-height: 100%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Try it out . . .
Resize
resize
property makes the dimensions adjustable. S
et
min- /max-
size to make sure
overflow: auto
.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Try it out . . .
margin fill
First of all, let's define father and son div:
Here we set the
margin-top
of the child div to the parent div height minus half of the child div height,
overflow
to
hidden
to trigger the parent div's BFC, the CSS code is as follows:
.parent {
margin:0 auto;
height:@parentWidth;
width:@parentWidth;
background: red;
Overflow: hidden; / * Trigger BFC * /
}
Try it out . . .
Absolute positioning
position:absolute
top
left 50%
and
margin
to negative, you can also center div horizontally vertically, first of all you need to define parent-son div:
.children {
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -25px ;
height:50px;
width:50px;
background-color: black;
}
Try it out . . .
margin
in the margin is half the width of the div, and the final effect diagram:
The picture centers
The average picture centers like
text-align
wrapping the picture in a div and setting
text-align
center
In a special way, a picture is used to take places so that the parent container gets high and wide, allowing the image that is offset by -50% to have a reference container for percentage calculations. T he advantage is that you can not know the size of the picture, casually put a size no more than the parent container on the picture can be centered. I n addition, compatibility is good, IE6 is smooth and compatible. The code is as follows:
p {
position:absolute;
top:50%;
left:50%;}
.show-img {
position:absolute;
right:50%;
bottom:50%;}
Try it out . . .
Transform is centered
In the example of div centering above, the width of div is fixed, but in real-world projects, it is possible to encounter an indefinitely wide div, especially in responsive or mobile designs. S
o here's a div horizontal vertical centering method that doesn't need to be set wide.
Start with the code:
.children-inline {
position: relative;
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: black;
color:white;
}
Try it out . . .
float
which will require the centered div's parent div, that
children
width of the child to
left:50%
children
side of the child with the horizontal midline. A
t this point, there is no real center, we need to move
children-inner
left -50%, so that the level is centered.
In the vertical direction, first set
children
of the children to 50%, and then the top and vertical midlines align, and
children-inner
up to -50%. B
ut this 50% is not calculated, so we
transform : translate3d(0, -50%, 0);
This method is very useful.
flex is centered
display:flex
in CSS3.
.parent {
display:flex;
Align-items: center; / * vertical home * /
Justify-content: center; / * Level in the level * /
width:100%;
height:100%;
background-color:red;
}
Try it out . . .
Extended reading
In addition to being used to represent centering, flex is a powerful open source application framework that allows traditional applications for browsers, mobile devices, and desktops to be built using the same programming models, tools, and code base. You can learn more about the Flex framework in this site's Flex Tutorials.