Question

我想将一块文本居中放在屏幕中间。我想使用bootstrap将文本居中放在屏幕中间以节省一些时间我是这样做的，但是块仍然在水平中间，而不是垂直和水平。

CSS：

.block {
    top: 50%;
    left: 50%; 
}

HTML：

<div class="row">
   <div class="col-xs-4">Text</div>
</div>

Answer 1

尝试以下代码。

我刚刚使用相同的HTML结构，只更新了CSS

我们也可以通过改变HTML结构来制作全宽。

.row{
    display: table;
    min-height: 100px; /* Just for demo */
}
.col-xs-4{
    display: table-cell;
    vertical-align: middle;
    float: none;
    background: #000;
}

<强> FIDDLE DEMO

JSFIDDLE WITH FULL WIDTH

Answer 2

好的......这是解决方案!!我用它在我的CSS！这对你也有帮助。

<强> HTML

<div class="vertical-center">
   <p>My name is Khan</p>
</div>

<强> CSS

.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

Answer 3

你为什么要尝试使用bootstrap来中心那个div？如果不是使用bootstrap的要求，你只需要在屏幕中间有一个div，你就可以这样做：

<div class="container">
   text
</div>

.container{
bottom: 0;
height: 100px;
margin: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 200px;
}

ps：是的，你应该具有该div的高度和宽度的大小

希望它对某人有帮助！

Answer 4

尝试将此代码用于Text，然后使用bootstrap row / 12的网格系统，你所做的是4 4 4 = 12网格系统

将一个块放在屏幕中间

4 个答案: