21

I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.

Here's my sample code:

<div class="login_header"></div>

<div class="container" style="text-align: center;">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel_form panel panel-default">
            <div class="panel-content">
                <h1>test</h1>
            </div>
            <div class="panel-footer">
                <p>test</p>
            </div>
        </div>
    </div>
</div>

<footer class="footer"></footer>

I have a CSS like this:

.login_header { min-height: 50px; background-color: #f5f5f5; }

.panel_form {
   /* I don't have an idea with this */
}

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%;
    height: 50px;
    background-color: #f5f5f5;
}

I am not good enough in CSS that's why I need your help. That's all thanks.. :)

Jerielle
  • 7,144
  • 29
  • 98
  • 164

9 Answers9

34

Bootstrap 4:

<div class=" h-100 d-flex justify-content-center align-items-center">
  <div>
      Items are Centered horizontally and vertically
  </div>
</div>

JsFiddle

speti43
  • 2,886
  • 1
  • 20
  • 23
15

Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:

<div class="d-flex justify-content-md-center align-items-center vh-100">
    <p>Your Content</p>
</div>

Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.

<div class="d-flex justify-content-md-center align-items-center vh-100">
    <div>
        <p>Content 1</p>
        <p>Content 2</p>
    </div>
</div>

This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="d-flex justify-content-md-center align-items-center vh-100">
                 <p>Content 1</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-flex justify-content-md-center align-items-center vh-100">
                 <p>Content 2</p>
            </div>
        </div>
    </div>
</div>

Here is a breakdown of each class:

  1. d-flex: Effectively display: flex, allows the div to grow or shrink depending on the amount of content.
  2. justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint.
  3. align-items-center: Centers the alignments of all items in a div.
  4. vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
Blake Stevenson
  • 171
  • 1
  • 6
13

I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
    hello world!
</div>
lu5er
  • 3,229
  • 2
  • 29
  • 50
9

So, check this out; it's pretty cool

HERES A CODE PEN TO SEE IT IN ACTION

html, body 100% width and height;

container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.

centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);

regardless of its size, it's centered in viewport

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #BADA55;
}
#outer #container {
  background-color: #f3f3f3;
  color: #663399;
  padding: 15px 25px;
  width: 100%;
  max-width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

LESS version

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
#outer {
  position: relative;
  width: 100%;
  height: 100%;
  background: #BADA55;

  #container {
    background-color: #f3f3f3;
    color: #663399;
    padding: 15px 25px;
    width: 100%;
    max-width: 300px;    
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;top: 50%;
  }
}
Todd
  • 5,314
  • 3
  • 28
  • 45
9

What worked for me is this:

 <div class="container h-100">
  <div class="d-flex justify-content-md-center align-items-center vh-100">
   <p>Your Content</p>
  </div>     
 </div>
Ahmed_mag
  • 232
  • 2
  • 6
2

Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically

But the short of it is:

<div class="center-block">...</div>

Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center

Community
  • 1
  • 1
aspencer8111
  • 786
  • 4
  • 9
2

Brothers check this one it's working... 

<head>
<title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
 hello world!
</div>**

</div


</body>
</html>
Tahir Shahzad
  • 53
  • 1
  • 1
  • 8
2

While I haven't found a solution to the general problem in pure Bootstrap 5, here is a solution that works with just a little additional CSS. Please test by changing the browser window size, or using the Responsive Mode of your browser, but not both at once, since they don't behave well together.

This example centers a 50% wide and high div, and centers the text inside it.

It works perfectly down to about a 200px by 200px window.

See Code Pen https://codepen.io/david263/pen/eYvOGOB and use Settings > Full screen mode.

<style type="text/css">
/* Required for proper centering */
html, body{
    height:100vh;
    width:100vw;
}
</style>

<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">

<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">

<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>

</div> <!-- Inner row -->
</div> <!-- Outer container -->
David Spector
  • 1,520
  • 15
  • 21
1

Give the outer div display: table; and the inner div display: table-cell Then you can use vertical-align: center on the inner div

Read further: Twitter Bootstrap - how to center elements horizontally or vertically

Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59