How to center a slide?

Question

I’m using that slide before and after. The point is: I need to center this slide and make it responsive, because when I play the code it’s leaning on the left corner. I tried to give a margin-left, at first centralizes, only it looks horrible in the responsive, does not adapt with the margin-left (Even in %).

Answer 1

Put the slide code between the tags and look if it works:

<center>
    <div id="exemplo">
        ...
    </div>
</center>

Try applying the CSS then, because consider the div id and disregard the center:

#exemplo{
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Answer 2

I didn’t put it on an interface to test. But the logic is that the div father of all must have margin:auto, making her stand in the middle of the screen.

Inside is two div's who are with position:absolute, to leave in the middle, apply margin:auto, left:0 and right:0.

For picture to get in the middle just put one text-align: center in those div's.

To make the image responsive, apply width:100% in them.

Something else in the div father. She has 800px width, then the picture will pop. Put a width: 100% and a max-width: 800px; to determine the size limit for this div.

Testing.

<div class="beforeAfterSlidebar">
   <div class="bottomImage"><img src="images/afterImage.jpg" width="800" height="600" alt="after" /></div>
   <div class="topImage"><img src="images/beforeImage.jpg" width="800" height="600" alt="before" /></div>
</div>

.beforeAfterSlidebar {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 600px;
  margin: auto;
}
.beforeAfterSlidebar div {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  overflow: hidden;
  margin: auto;
  text-align: center;
}

.beforeAfterSlidebar div img{
    width: 100%;
}
.topImage {
  border-right: solid 4px black;
}