In a bootstrap responsive page how to center a div

前端未结

关注

 16  2255

长情又很酷

$\"position$

I need to create a responsive page using bootstrap by positio

相关标签:

16条回答

小鲜肉

2020-12-02 05:18

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.

0 讨论(0)

臣服心动

2020-12-02 05:20

Try this, For the example, I used a fixed height. I think it is doesn't affect the responsive scenario.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

0 讨论(0)

臣服心动

2020-12-02 05:23
You don't need to change anything in CSS you can directly write this in class and you will get the result.
```
<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

时光说笑

2020-12-02 05:23

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

you can do also that way.

0 讨论(0)

上一页 1 2 3