如何制作一个分割中心的 CSS

在 Web 开发中，经常需要将一个页面上的内容水平或垂直分成几个部分，使得页面更加美观和易于管理。为此，我们可以使用 CSS 中的分割中心来实现。本文将介绍如何使用 CSS 制作一个分割中心。

水平分割中心

首先，让我们来看如何将一个页面水平分割成两个部分。

HTML

我们需要一个包含两个 div 元素的容器，分别用于放置上半部分和下半部分的内容。

<div class="container">
  <div class="top">顶部内容</div>
  <div class="bottom">底部内容</div>
</div>

CSS

为了将这两个 div 元素分割开来，我们需要为容器设置如下的样式：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.top {
  flex: 1;
  background-color: #f0f0f0;
}

.bottom {
  flex: 1;
  background-color: #e5e5e5;
}

其中，display: flex 表示将容器设置为弹性盒子，flex-direction: column 表示设置为纵向排列。 justify-content: center 表示垂直居中。 height: 100vh 表示容器的高度等于视口的高度。

为了让上半部分和下半部分的高度平分容器的高度，我们需要给它们设置相同的 flex 值。这里，我们设置为 flex: 1，表示两个部分的高度平分容器的高度。

效果

在浏览器中打开页面，可以看到容器被垂直分成了两个部分，上部分的背景颜色为浅灰色，下部分的背景颜色为淡灰色。

垂直分割中心

接下来，让我们来看如何将一个页面垂直分割成两个部分。

HTML

我们需要一个包含两个 div 元素的容器，分别用于放置左半部分和右半部分的内容。

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

CSS

为了将这两个 div 元素分割开来，我们需要为容器设置如下的样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.left {
  flex: 1;
  background-color: #f0f0f0;
}

.right {
  flex: 1;
  background-color: #e5e5e5;
}

其中，align-items: center 表示水平居中。

为了让左半部分和右半部分的宽度平分容器的宽度，我们需要给它们设置相同的 flex 值。这里，我们设置为 flex: 1，表示两个部分的宽度平分容器的宽度。

效果

在浏览器中打开页面，可以看到容器被水平分成了两个部分，左部分的背景颜色为浅灰色，右部分的背景颜色为淡灰色。

总结

本文介绍了如何使用 CSS 中的分割中心来将一个页面分成两个部分。水平分割中心使用 display: flex; flex-direction: column; 来设置纵向排列的弹性盒子，垂直分割中心使用 display: flex; 和 align-items: center; 来将两个部分水平居中。希望这篇文章能够帮助你更好地掌握 CSS 中的分割中心。