May 04, 2021 CSS
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.
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;
}
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 * /
Tip: You
can refer to the
CSS padding property section for the use of
padding
There are
hacks
negative
margin
shadow
: : before
and so on.
If your content isn't a fixed size, most of them are fragile.
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; }
This technique is quite aggressive and also applies to content of no fixed size,
min-width
max-height
overflow:scroll
etc.
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;
}
Note: Height must be defined and it is
overflow: auto
to prevent content from overflowing.
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;
}
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;
}
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;
}
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;
}
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;
}
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 * /
}
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;
}
margin
in the margin is half the width of the div, and the final effect diagram:
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%;}
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;
}
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.
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);
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;
}
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.