bootstrap 垂直居中 布局_Bootstrap 4 栅格系统垂直布局

关键词：bootstrap 4，vertical alignment，grid systerm

问题：按照Bootstrap 4 官方文档的说明。应用.align-items-center可以使元素垂直居中：

Bootstrap 4 垂直居中示例.png

官方示例代码：

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

将官方示例代码复制粘贴到新文档，在浏览器中打开：

官方示例代码实际的效果.png

垂直的居中的效果并没有实现。

解决办法：给要垂直居中的元素所在的row加一个高度，

Hello, world!

div {

border-style: solid;

border-width: 1px;

}

.row,.container {

height: 30vh;

}

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

总结：

将垂直居中的元素包裹在.row中，再用.container包裹，并给.row设置一个高度。