在引导响应式页面中如何将 div 居中 [英] In a bootstrap responsive page how to center a div

问题描述

我需要通过在页面中心放置一个 div 来使用引导程序创建一个响应式页面，就像下面提到的布局一样.

解决方案

更新 Bootstrap 4

使用 flex-box 实现更简单的垂直网格对齐

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');html,身体 {高度:100%}

<div class="col" style="background:red">文本

Bootstrap 3 的解决方案

@import url('http://getbootstrap.com/dist/css/bootstrap.css');html, 正文, .container-table {高度:100%；}.容器表{显示:表；}.vertical-center-row {显示:表格单元格；垂直对齐:中间；}

<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 的简单示例.

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.

解决方案

UPDATE for Bootstrap 4

Simpler vertical grid alignement with flex-box

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

Solution for Bootstrap 3

@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>

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

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