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

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

The second one ：

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

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 .

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

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!