bootstrap中如何使div上下、垂直居中

最新推荐文章于 2021-07-12 23:04:53 发布

原创最新推荐文章于 2021-07-12 23:04:53 发布 · 1.5w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #div居中

收录于

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap在不同屏幕尺寸下使div元素垂直、水平居中，并保持响应式布局。通过设置div的定位属性和使用特定的偏移类，如col-lg-offset-4，结合transform属性实现div在页面上精确居中。

使用bootstrap布局，如何使div在指定区域上下、垂直居中并适应各个屏幕？

在垂直方向，可以设置需要居中的div定位为absolute，指定距离top距离50%。水平方向可以指定div的宽度col-lg- ，然后进行对应的偏移。

html页面：

<div class="container-fluid" >
    <div class="login-form  col-lg-4 col-lg-offset-4  col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 ">
    内容...
    </div>
</div>

css文件：

.login-form {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    min-height: 300px;
    height: auto;
}

页面效果：