<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  display: flex;
  align-items: center; /* 所有子元素在垂直方向居中 */
  height: 300px;
  background-color: #f0f0f0; /* 淺灰色背景 */
  border: 2px solid #333; /* 深色邊框 */
  padding: 10px; /* 內邊距 */
}

.item {
  background-color: #4CAF50; /* 綠色背景 */
  color: white;
  padding: 20px;
  border: 2px solid #fff;
  margin: 5px;
  font-size: 18px;
}

.item-special {
  align-self: flex-end; /* 這個元素會在容器底部對齊 */
  background-color: #FF5722; /* 橙色背景 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.