css实现垂直上下布局的两种常用方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了css实现垂直上下布局的两种常用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

例子：将两个<span>元素在<div>内垂直居中放置.

方法一：使用 Flexbox 来实现。

在下面的示例中，我将为 <div> 元素添加样式，使其成为一个 Flex 容器，并使用 Flexbox 属性将其中的两个 <span> 元素垂直居中：

import React from 'react';
import './Component.css'; // 导入样式文件

function Component() {
  return (
    <div className="container">
      <span className="centered">Span 1</span>
      <span className="centered">Span 2</span>
    </div>
  );
}

export default Component;

在上述代码中，我们为

元素添加了名为 .container 的样式类，并为两个元素分别添加了名为 .centered 的样式类。

然后，在样式文件（例如 Component.css）中，你可以使用 Flexbox 属性来实现垂直居中：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px; /* 为示例添加一个高度 */
}

.centered {
  /* 可选的样式定义 */
}

我们通过将 .container 的 display 属性设置为 flex，以及设置 flex-direction: column;、align-items: center; 和 justify-content: center;，将其内部的元素在垂直方向上居中对齐。

你可以根据需要对 .centered 类进行进一步的样式定义，例如设置文字样式、边距等。

方法二：使用 Grid 实现上下布局

你可以在容器上应用 Grid 布局，并使用网格行来定位上下两个元素。下面是一个使用 Grid 实现上下布局的示例：

import React from 'react';
import './Component.css'; // 导入样式文件

function Component() {
  return (
    <div className="container">
      <div className="top">上方内容</div>
      <div className="bottom">下方内容</div>
    </div>
  );
}

export default Component;

在上述代码中，我们在 <div> 元素中包含了两个子元素，分别是上方内容和下方内容。

然后，在样式文件（例如 Component.css）中，你可以使用 Grid 属性来实现上下布局：


.container {
  display: grid;
  grid-template-rows: 1fr auto; /* 使用网格行实现上下布局 */
  height: 100vh; /* 为示例添加一个高度，这里使用视口高度作为容器高度 */
}

.top {
  background-color: #f1f1f1;
}

.bottom {
  background-color: #ddd;
}