Posts in current category

It's easy to learn these methods to center css


May 04, 2021 00:00 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:

Use line-height to make height same as height:

.wrap{

line-height: 200px;/*垂直居中关键*/

text-align:center;

height: 200px;

font-size: 36px;

background-color: #ccc;

}


Try it out . . .
The effect is as follows:
It's easy to learn these methods to center css

Padding fill

Use padding and background-clip achieve div's horizontal vertical centering:
By 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;/*居中的关键*/


Try it out . . .
The effect is as follows:

It's easy to learn these methods to center css

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;/*触发BFC*/

}


Try it out . . .
The effect is as follows:
It's easy to learn these methods to center css

Absolute positioning

With 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 . . .
The margin in the margin is half the width of the div, and the final effect diagram:

It's easy to learn these methods to center css

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 . . .
The effect is as follows:

It's easy to learn these methods to center css

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 . . .
The effect is as follows:

It's easy to learn these methods to center css

First we take 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

Finally, let's look at the horizontal vertical centering display:flex in CSS3.

.parent {

display:flex;

align-items: center;/*垂直居中*/

justify-content: center;/*水平居中*/

width:100%;

height:100%;

background-color:red;

}


Try it out . . .
The effect is as follows:

It's easy to learn these methods to center css
This approach is the easiest, is not compatible, but over time, the major browsers will be compatible.

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.