Doubt with image positioning

Question

I have an image for the logo, I want it to always be positioned in the center of the screen for all devices.

I’m using the bootstrap.

CSS

.relative{
    position: relative;
    left: 40px;
}

HTML

<div class="relative">
    <img src="~/Content/images/Checkmark.fw.png" alt="logo" class="img-circle">
</div>

Thanks

Answer 1

If case wishes that whenever the class .relative positioned in the center, could use the code below::

CSS

.relative {
 margin:0 auto;
 float:none;
}

Answer 2

It has the auxiliary bootstrap classes that do this, in this case the center-block.

Bootstrap css images

To center images that use the . img-Responsive class, use . center-block instead of . text-center. See the auxiliary classes section for more details on using . center-block.

The center-block would be nothing more than:

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 3

if you want an object to stay always in the center of the screen, regardless of other elements, then you must use position: fixed, anchor it at the ends of the screen, use a fixed size and margem: auto:

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}

<div class="centro"></div>

in an amending form to margin: auto, you can use a transform: traslate(-50%, -50%)to move the element.

.centro {
  background-image: url('http://cdn.flaticon.com/png/256/42608.png');
  box-shadow: 0px 0px 10px black;
  border-radius: 50%;
  background-color: whitesmoke;
  
  width: 256px;
  height: 256px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

<div class="centro"></div>

Answer 4

Another option would be:

.relative{ 
    display: table;
    margin: 0 auto;
}

Answer 5

Dude, you need to set her size first. By setting the size, you can apply the margin: auto; that it will be centralized.

.relative {
    width: 20%;
    margin: auto;
}