Div wrap center - JSFiddle - JSFiddle - JSFiddle - JSFiddle

Center a child div, and this child div wrap around its child div.

by MrHeadSlash

HTML

<body>

  <div class="slideshow">
    <div class="sl_container">
      <div class="sl_arrows">
        <div class="sl_content">
          <img class="fade" src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
          <!--
          <img class="fade" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" />
          -->
        </div>
        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
      </div>
    </div>
  </div>
<br>
<br>
  <div class="slideshow">
    <div class="sl_container">
      <div class="sl_arrows">
        <div class="sl_content">
          <div class="fade">
            <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" />
          </div>
         <!--
          <div class="fade">
            <img src="https://s24.postimg.org/3unhjb09x/Test_Image_Popup.jpg" />
          </div>
            -->
        </div>
        <a class="prev">&#10094;</a>
        <a class="next">&#10095;</a>
      </div>
    </div>
  </div>
</body>

CSS

.slideshow {
	  position: relative;
	  text-align: center;
	  margin: 0 auto;	  /*this centers the div*/
    overflow: hidden;
    /* width and heiht, if needed to be established */
    /*width: 500px; 
    height: 500px;*/
    background-color: #ff7b5f; /* Red/orange color test to see layer */
    vertical-align: middle;
    
	}
	
	.sl_container {
	  position: relative;
	 background-color: #d3d3d3;	  /*grey color test to see layer */
	  margin: 0 auto;	  /*this centers the div*/
	  box-sizing: border-box;
	  display: inline-block;
    max-height:100%;
    /*
    top: 50%;
    transform: translateY(-50%);
    */

	}
	
	.sl_arrows {
	  background-color: #ffc67e; 	  /*orange color test to see layer */
	  display: inline-block;	  /*adjust div to content*/
	  margin: 0 auto;	  /*this centers the div*/

	}
	
	.sl_arrows a {
	  background-color: #9ac99a;	  /*Green color test to see layer */

	}
	

	
	/* Next & previous buttons */
	/* Version side middle button*/

	.prev,
	.next {
	  cursor: pointer;
	  position: absolute;
	  padding: 16px;
	  margin-top: -22px;
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  
	  top: 50%;
	  margin-top: -22px;

	}

	/* Version side full button - WORKING ON IT*/
	/*
	.prev,
	.next {
	  cursor: pointer;
	  position: absolute;
	  
	  color: white;
	  font-weight: bold;
	  font-size: 18px;
	  transition: 0.6s ease;
	  
	  top: 0;
	  margin-top: 0px;
	  margin-bottom: 0px;
	  padding-left: 16px;
	  padding-right: 16px;
	  height: 100%;
	}
	*/
  
	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}
  
	/* Position the "prev button" to the left */
	.prev {
	  left: 0;
	  border-radius: 0 3px 3px 0;
	}
  
	/* On hover, add a black background color with a little bit see-through */
	.prev:hover,
	.next:hover {
	  background-color: rgba(0, 0, 0, 0.8);
	}
  
	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 300px) {
	  .prev,
	...

JavaScript

/*
$(function() {
  $(".sl_content").each(function() {
    $(this).children().not(":nth-child(2)").hide();
  });

  setInterval(function() {
    $('.sl_content').each(function() {
      $(this).children(':first')
        .hide()
        .next()
        .show()
        .end()
        .appendTo($(this));
    });
  }, 3000);
});
*/