使用 Bootstrap 4 垂直居中 HTML 元素

Bootstrap 4 中的垂直对齐将在本文中处理。网页设计中垂直居中的对象有其自身的复杂性。好吧,您可以借助默认的 Bootstrap 和简单的 HTML 以简单的方式垂直居中对象。就是这样:

如何使用 Bootstrap 4 垂直对齐元素

就垂直居中的对象而言,这是网页设计师的简单日常任务之一。然而,有时这个简单的任务会变成网页设计师最糟糕的噩梦。您可能会花费数小时尝试对齐文本框或图像以适应页面上的其他元素。得知它使网页设计师发疯,我们不会感到惊讶!

网页设计师过去常常依赖自定义类和 Flexbox 来处理这个难题!是的,尽管听起来很简单,但垂直居中元素并不是那么简单。

不过,也不是大意。多亏了Bootstrap 的新版本,您可以依靠默认类以更简单的方式实现相同的目标。

最好的事情是您只需要处理最少的代码。我们已经在自己的网站上使用了它,所有开发人员都对结果非常满意。我们对这种方法的有效性感到惊喜。

让我们看一下在您的网站上实现相同功能所需的 HTML: