CSS vertical layout

In web design, vertical layout is a very important aspect. It determines the vertical position relationship of different elements on the page. By reasonably setting the CSS style, we can achieve various vertical layout effects, such as center layout, vertical centering, vertical alignment, etc. This article will introduce in detail how to use CSS to achieve various common vertical layout effects.

Vertical Centering

Vertical centering is a common requirement in web page layout, especially in responsive design. We can achieve vertical centering in the following ways:

Using Flexbox Layout

Flexbox is a powerful layout model that makes it easy to achieve vertically centered layouts. We can vertically center child elements by setting the container’s display: flex; and align-items: center; properties.

.container {
display: flex;
align-items: center;
justify-content: center; /* Horizontally center */
height: 300px;
}

.item {
background-color: #f1f1f1;
}

<div class="container">
<div class="item">Vertically center</div>

</div>

Using Grid Layout

Similarly, we can use Grid Layout to achieve vertical centering. By setting the container’s display: grid; and align-items: center; to vertically center the child elements.

.container {
display: grid;
place-items: center;
height: 300px;
}

.item {
background-color: #f1f1f1;
}

<div class="container"> 
<div class="item">Vertical Centering</div> 
</div>

Using Absolute Positioning

Vertical centering can also be achieved using absolute positioning. We can set the child element’s position: absolute; and top: 50%; transform: translateY(-50%); to vertically center the element.

.container {
position: relative;
height: 300px;
}

.item {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #f1f1f1;
}

<div class="container">
<div class="item">Vertical Center</div>

</div>

Vertical Alignment

Vertical alignment refers to aligning multiple elements vertically. Common vertical alignment options include top, bottom, and center.

Top Alignment

Top alignment aligns the tops of multiple elements horizontally. This can be achieved by setting vertical-align: top; .

.container {
height: 300px; 
} 

.item {
display: inline-block; 
vertical-align: top; 
width: 100px; 
height: 100px; 
background-color: #f1f1f1; 
}

<div class="container"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
</div>

Bottom Alignment

Bottom alignment aligns the bottoms of multiple elements horizontally. We can achieve bottom alignment by setting vertical-align: bottom;

.container { 
height: 300px; 
} 

.item { 
display: inline-block; 
vertical-align: bottom; 
width: 100px; 
height: 100px; 
background-color: #f1f1f1; 
}

<div class="container"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
</div>

Center Alignment

Center alignment aligns multiple elements vertically. We can achieve this by setting vertical-align: middle; .

.container {
height: 300px;
text-align: center;
} 

.item {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background-color: #f1f1f1;
}

<div class="container"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
</div>

Summary

Through this article, we learned how to use CSS Achieve various common vertical layout effects, including vertical centering and vertical alignment. By flexibly applying these techniques, we can more easily control the vertical positioning of elements in web design, thereby creating more beautiful page layouts.