Shulou(Shulou.com)06/01 Report--

This article is to share with you about the common ways of Css centering. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Horizontal center

Inline element (inline or inline-*) is in the middle?

You can center him relative to the parent block element.

. center-children {

Text-align: center

}

Block level element (block level) is in the center?

You can center it by setting margin-left and margin-right to auto (also set width, otherwise it will fill the whole container and can't see the center effect), such as.

. center-me {

Margin: 0 auto

}

What if there are many block-level elements?

If you have very uniform block-level elements that need to be centered horizontally, you'd better use a different display type. This is an example of using inline-block and flex.

Online example: http://jsfiddle.net/ourjs/0b6b7wt8/

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.

I'm an element that is block-like with my siblings and we're centered in a row.

Body {

Background: # f06d06

Font-size: 80%

}

Main {

Background: white

Margin: 20px 0

Padding: 10px

}

Main div {

Background: black

Color: white

Padding: 15px

Max-width: 125px

Margin: 5px

}

.inline-block-center {

Text-align: center

}

.inline-block-center div {

Display: inline-block

Text-align: left

}

. flex-center {

Display: flex

Justify-content: center

}

Vertical center

Vertical centering is a bit tricky in CSS

Inline elements (inline or inline-*) are centered, like text and links?

Is it one-line?

Sometimes elements can appear as if they are centered vertically simply because they have equal upper and lower padding

.link {

Padding-top: 30px

Padding-bottom: 30px

}

If padding doesn't work for some reason and the text doesn't wrap, you can use line-height to align the text with height.

.center-text-trick {

Height: 100px

Line-height: 100px

White-space: nowrap

}

Is it multi-line?

The upper and lower padding method can also center multiple lines, but if this method doesn't work, you can make the containers of the text display in table cell mode, and then set the vertical-align property of the text to align, just like talbe

Online demo: http://jsfiddle.net/ourjs/0fn2u4rc/

I'm vertically centered multiple lines of text in a real table cell.

I'm vertically centered multiple lines of text in a CSS-created table layout.

Body {

Background: # f06d06

Font-size: 80%

}

Table {

Background: white

Width: 240px

Border-collapse: separate

Margin: 20px

Height: 250px

}

Table td {

Background: black

Color: white

Padding: 20px

Border: 10px solid white

/ * default is vertical-align: middle; * /

}

. center-table {

Display: table

Height: 250px

Background: white

Width: 240px

Margin: 20px

}

. center-table p {

Display: table-cell

Margin: 0

Background: black

Color: white

Padding: 20px

Border: 10px solid white

Vertical-align: middle

}

Block-level elements (block level) are vertically centered.

Do you know the height of the element?

For many reasons, not knowing the height of the page layout is quite common.

But if your layout has a fixed height, you can center vertically like this:

.parent {

Position: relative

}

.child {

Position: absolute

Top: 50%

Height: 100px

Margin-top:-50px; / * if you do not use: border-box; 's box model, you need to set this * /

}

The height of the element is unknown

Although unknown, it is still possible for you to push up the width of 50%

Online demo: http://jsfiddle.net/ourjs/9sLf7p56/

.parent {

Position: relative

}

.child {

Position: absolute

Top: 50%

Transform: translateY (- 50%)

}

Can you use flexbox?

It's not surprising that it's much easier to use flexbox.

I am a block-level element with an unknown height, centered vertically within my parent.

Body {

Background: # f06d06

Font-size: 80%

}

Main {

Background: white

Height: 300px

Width: 200px

Padding: 20px

Margin: 20px

Display: flex

Flex-direction: column

Justify-content: center

Resize: vertical

Overflow: auto

}

Main div {

Background: black

Color: white

Padding: 20px

Resize: vertical

Overflow: auto

}

Centered horizontally and vertically at the same time

Elements have a fixed width and height

If the width and height of the element are fixed, you need to be absolutely centered, then move up and left by 50% of the width, which has excellent cross-browser support.

.parent {

Position: relative

}

.child {

Width: 300px

Height: 100px

Padding: 20px

Position: absolute

Top: 50%

Left: 50%

Margin:-70px 0 0-170px

}

Width and height of the element unknown

If you don't know the height and width (variable), you can use the transofrm property to translate minus 50% in both directions.

.parent {

Position: relative

}

.child {

Position: absolute

Top: 50%

Left: 50%

Transform: translate (- 50%,-50%)

}

Thank you for reading! This is the end of this article on "what are the common ways to center Css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.