集中 div col

在使用 Bootstrap 或其他 CSS 框架实现网页布局时，经常需要使用到 div 标签和栅格系统，以实现网页元素的排列和定位。div col 是常用的栅格系统中的一个类，用于实现灵活的网格排列。本文将介绍如何使用 div col 完成集中排列的效果。

什么是 div col？

div col 是栅格系统中的一种类，用于指定网格的列数、偏移、块显示与否等布局效果。通过在 div 标签上添加 col 类的方式来实现栅格布局。

集中 div col

假设我们有 3 个 div col，如下图所示，我们想要将它们水平居中并垂直居中。

我们可以在这些 div col 的父元素上添加以下样式：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将会将 parent 元素设置为弹性盒子布局，使得它的子元素水平居中并垂直居中。

最终的 HTML 和 CSS 代码如下：

<div class="parent">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col {
  border: 1px solid black;
  padding: 10px;
}

这将会得到以下的结果：

总结

通过在 div 标签上添加 col 类，我们可以使用 Bootstrap 的栅格系统实现网页布局。而通过设置父元素的弹性盒子布局，我们可以简单地实现网页元素的集中排列。