title: How can I put a div in the middle of the page if I have more than one div?
body: <p>I am trying to put a <code>div</code> on the middle of my page (that will be hidden and only be shown in some specific cases, but it is not what I want to achieve right now).</p>
  
  <p>I tried fixing it and putting a <code>margin: 0 auto</code> to put it on the middle of the page but I cannot get it. I think it has to be reference with the <code>position: relative</code> and <code>position: absolute</code> of the <code>div</code> in which it is contained the <code>big image div</code> and for that <code>div</code> respectively but I cannot change their values because I made a carousel (here I do not show it because it would extend very much the code)  that needs to be with that parameters.</p>
  
  <p>Here is my code: <a href="https://jsfiddle.net/nygppLen/" rel="nofollow">JSFiddle</a> in which you can see the efect that it gives to me right now. I cannot get it out.</p>
  
  <p>How can I put my red div on the middle?</p>
  
  <p>Thanks in advance!</p>