How to center single image in the middle of the page using Bootstrap 4

Question

Looks so simple, but so far I was not able to find a single answer to this.

The problem is simple, I have only one image, and I want to show this in the middle of the page and done.

Here is my code that works using only CSS:

.centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }


And on my HTML code just this:

<div class="centered">
     <img src="https://via.placeholder.com/100">
</div>

So far I have not found one single answer how to to this using Bootstrap 4, can anyone help on this?

score 1 · Answer 1 · answered Jun 07 '20 at 09:20

1

Here it is, just use 4 classes provided by the Bootstrap 4.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="d-flex justify-content-center align-items-center vh-100">
     <img src="https://via.placeholder.com/100">
</div>

answered Jun 07 '20 at 09:20

yinsweet

2,823
1
9
21

Thanks mate, but still don't work, only align horizontal, but never in the middle of the page :/ – Felipe Florencio Jun 07 '20 at 10:14
@FelipeFlorencio Did you run the code snippet? It is actually center horizontally and vertically. – yinsweet Jun 07 '20 at 10:27
@FelipeFlorencio Are you using Bootstrap ver 4.0.0? Will you consider to use latest ver 4.5.0 because `vh-100` class is not available in ver 4.0.0 – yinsweet Jun 07 '20 at 10:35
the code snippet shows it is at center horizonally and vertically both – Fareed Khan Jun 07 '20 at 10:50

score 0 · Answer 2 · answered Jun 07 '20 at 09:18

0

Use code as below

html, body {height:100%}

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

<div class="d-flex h-100 align-items-center">
  <img class=" m-auto" src="smiling_face_emoji.png">
</div>

answered Jun 07 '20 at 09:18

לבני מלכה

15,925
2
23
47

tell me for more help – לבני מלכה Jun 07 '20 at 09:19
Thanks mate, but still not working, never align in the center of the page it self only horizontal, it's so pit something that can be achieved so easily with CSS bootstrap make so weird – Felipe Florencio Jun 07 '20 at 10:11

score 0 · Answer 3 · answered Jun 07 '20 at 09:19

0

Bootstrap has a h-100 property to set height to 100% so make sure it is applied to your container and row. No other css is necessary as Bootstrap4 has the classes needed to accomplish this by itself.

HTML Code:

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <img src="smiling_face_emoji.png">
  </div>
</div>

answered Jun 07 '20 at 09:19

Gwire90

85
1
1
7

No succes :D still pure CSS only I really was expecting something like this be much easier than CSS, but looking from in the internet, StackOverflow there's a thousand of request like this and nothing that I tried work, only simple CSS – Felipe Florencio Jun 07 '20 at 10:12

score 0 · Answer 4 · answered Jun 07 '20 at 09:32

0

Here it is:

html{
height:100vh;
width:100vw;
}
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

    <div class="centered">
         <img src="https://via.placeholder.com/100">
    </div>

answered Jun 07 '20 at 09:32

Vipul Sinha

540
1
8
16

ok sorry. I read that incorrectly. my bad – Vipul Sinha Jun 07 '20 at 11:36
No problem thanks for helping anyway ! – Felipe Florencio Jun 08 '20 at 11:10

How to center single image in the middle of the page using Bootstrap 4

4 Answers4