bootstrap 中实现垂直居中的方法有:使用 flexbox 实用程序 align-items-center;使用 margin 实用程序 my-auto;使用 css 定位属性 position: absolute 和 top: 50%; transform: translatey(-50%);;使用 css 网格属性 align-content 和 justify-content。
如何在 Bootstrap 中实现垂直居中
在 Bootstrap 中,有几种方法可以实现垂直居中元素:
1. 使用 flexbox 实用程序
flexbox 实用程序 align-items-center 可以将元素在父容器内垂直居中。
HTML:
<div class="container align-items-center"> <p>垂直居中的文本</p> </div>
2. 使用 margin
对于较小的元素,可以使用 margin 实用程序 my-auto。它将垂直方向上的 margin 设置为自动,有效地将元素居中。
HTML:
<div class="container"> <p class="my-auto">垂直居中的文本</p> </div>
3. 使用定位
还可以使用 CSS 定位属性 position: absolute 和 top: 50%; transform: translateY(-50%); 将元素垂直居中。
HTML:
<div class="container position-absolute" style="top: 50%; transform: translateY(-50%);"> <p>垂直居中的文本</p> </div>
4. 使用 CSS 网格
CSS 网格属性 align-content 和 justify-content 可以用来在网格容器内垂直居中元素。
HTML:
<div class="container d-flex align-content-center justify-content-center"> <p>垂直居中的文本</p> </div>
根据您的具体需求,选择最适合您的方法。
以上就是bootstrap如何垂直居中的详细内容,更多请关注php中文网其它相关文章!
版权声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系 yyfuon@163.com