What are the common layouts in CSS?

Common layouts in CSS are: 1. Horizontal centering, inline elements are horizontally centered, block-level elements are horizontally centered, and multiple block-level elements are horizontally centered; 2. Vertical centering, single-line inline elements are vertically centered and multiple Row elements are vertically centered; 3. Use flex layout; 4. Single-column layout; 5. Two-column layout.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Horizontal centering:

Horizontal centering of inline elements

Use text-align: center to achieve inlining within block-level elements The element is centered horizontally. This method is effective for horizontal centering of inline elements (inline), inline blocks (inline-block), inline tables (inline-table), and inline-flex elements.

Core code:

.center-text { text-align: center; }

Block-level elements are horizontally centered

By setting the margin-left and margin-right of fixed-width block-level elements to auto, you can make the block Level elements are centered horizontally.

Core code:

.center-block { margin: 0 auto; }

Multiple block-level elements are horizontally centered

Use inline-block

If there are two or more blocks in a row Level element, by setting the display type of the block-level element to inline-block and the text-align attribute of the parent container, the multi-block-level elements can be horizontally centered.

Core code:

.container { text-align: center; } .inline-block { display: inline-block; }

2. Vertical centering

Single-line inline (inline-) elements are vertically centered

By setting Inline elements have height and line-height equal to each other, centering the element vertically.

Core code:

#v-box { height: 120px; line-height: 120px; }

Multi-line elements are vertically centered

Using table layout (table)

Using table layout's vertical-align: middle can be achieved Vertical centering of child elements.

Core code:

.center-table { display: table; } .v-cell { display: table-cell; vertical-align: middle; }

3. Use flex layout (flex)

Use flex layout to achieve vertical centering, where flex-direction: column definition The main axis direction is longitudinal. Because flex layout is defined in CSS3, there are compatibility issues in older browsers.

Core code:

.center-flex { display: flex; flex-direction: column; justify-content: center; }

4. Single column layout

There are two main types:

- header, content, footer width Same, there is a max-width

-the header and footer occupy 100% of the width of the browser, and the content has a max-width

The first one

头部
 
内容
 

The second one ：

头部
 
内容
 

5. Two-column layout

float margin

Use float to pull the sidebar and the main content into one line, and then set the margin of the main content .

  
主要内容
 

Recommended learning:css video tutorial

The above is the detailed content of What are the common layouts in CSS?. For more information, please follow other related articles on the PHP Chinese website!