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

This article mainly explains "what are the skills of CSS central layout". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the skills of CSS central layout?"

Horizontal center element:

Method 1: CSS3 transform

.parent {

Position: relative

}

.child {

Position: absolute

Left: 50%:

Transform: translateX (- 50%)

}

Method 2: flex layout

.parent {

Display: flex

Justify-content: center

}

Suitable for floating child elements, absolute positioning, inline elements, can be horizontally centered.

The centered element is the inline element in the regular document stream (display: inline)

Common inline elements are: span, a, img, input, label, etc.

.parent {

Text-align: center

}

The centered element is the block element in the regular document flow (display: block)

Common block elements: div, h2~h7, table, p, ul, li, etc.

Method 1: set margin

.parent {

Width: 100%

}

.child {

Width: 600px

Height: 50px

Margin: 0 auto

Background: # 999

}

Method 2: modify to inline-block attribute

.parent {

Text-align: center

}

.child {

Display: inline-block

}

.child {

Width: 100px

Float: left

Position: relative

Left: 50%

Margin-left:-50px

}

Method 1:

.parent {

Position: relative

}

.child {

Position: absolute

Width: 100px

Left: 50%

Margin-left:-50px

}

Method 2:

.parent {

Position: relative

}

.child {

Position: absolute

Width: 100px

Left: 0

Right: 0

Margin: 0 auto

}

Vertically centered element:

Method 1: CSS3 transform

.parent {

Position: relative

}

.child {

Position: absolute

Top: 50%

Transform: translateY (- 50%)

}

Method 2: flex layout

.parent {

Display: flex

Align-items: center

}

Suitable for floating child elements, absolute positioning, inline elements, can be vertically centered.

.text {

Line-height: 200px

Height: 200px

}

Method 1:

.parent {

Position: relative

}

.child {

Position: absolute

Top: 50%

Height: 100px

Margin-top:-50px

}

Method 2:

.parent {

Position: relative

}

.child {

Position: absolute

Top: 0

Bottom: 0

Height: 100px

Margin: auto 0

}

Vertically centered element:

Div {

Width: 100px

Height: 100px

Margin: auto

Position: fixed

/ / absolute is ok

Top: 0

Right: 0

Bottom: 0

Left: 0

}

Advantages:

It can be realized not only in the middle, but also on the left and right.

The width and height of the element supports% attribute value and min-/max- attribute

Can be encapsulated as a public class and can be used as a pop-up layer

The browser has good support.

.child {

Width: 100px

Height: 100px

Position: absolute

Top: 50%

Left: 50%

Margin-left:-50px

Margin-top:-50px

}

Features:

Good cross-browser features, compatible with IE6-IE7

Poor flexibility, non-adaptive, width and height does not support percentage size and min-/max- properties

.child {

Width: 100px

Height: 100px

Position: absolute

Top: 50%

Left: 50%

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

}

Features:

The content is adaptive, can be encapsulated as a common class, and can be used as a pop-up layer.

May interfere with other transform effects

.parent {

Display: flex

Justify-content: center

Align-items: center

}

This is the future trend of CSS layout. Flexbox is a new property of CSS3 and is designed to solve common layout problems such as vertical centering.

Text {

Height: 100px

Line-height: 100px

Text-align: center

}

At this point, I believe you have a deeper understanding of "what are the skills of CSS central layout?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.