在引导响应页面中如何中心一个div [英] In a bootstrap responsive page how to center a div

问题描述

我需要使用引导来创建一个响应页面，通过在页面中心放置一个div，如下面提到的布局。

I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.

推荐答案

检查一下 -

Check this out-

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

以所有屏幕尺寸为中心的水平和垂直div示例。

It's a simple example of a horizontally and vertically div centered in all screen sizes.

这篇关于在引导响应页面中如何中心一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！