center in Image does not work correctly

There are a couple of things you should not do.

Do not use the <center>

It's obsolete from HTML5 and no longer has support. So, given its obsolete status, browsers will no longer interpret it as it did in the future. To center an image you can do it simply via CSS, using the properties text-align or margin .

Avoid using too much absolute

If you have several elements positioned as absolute, it will be difficult to make them responsive. It is best to define a flow for the elements and thus be able to make them responsive. Absolute elements are generally used for quite specific things, such as the "upload" button, animations, floating menus, etc.

I have touched a bit of your code. The images are now grouped in a container .images , which has a position relative to be able to have the image "floating" perfectly aligned with the static only with a left: 0 . In addition, #ip6 has the property text-align: center to center the h1 and the .div-image .

body {
  overflow-x: hidden;
  background: #f2f2f2;
}

#ip6 {
  text-align: center;
}

.div-image {
  display: inline-block;
  margin: 50px auto;
  float: none;
  min-height: 350px;
  transition: color 1s, font-size 1s;
}

.div-image:hover {
  color: rgb(90, 200, 120);
  font-size: 20px;
}

.images {
  position: relative;
}

.rotate-image {
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 1s, margin-left .6s, margin-top .6s;
}

.rotate-image:hover {
  transform: rotate(15deg);
  margin-left: 50px;
  margin-top: 30px;
}

<article class="row" id="ip6">
  <h1>iPhone</h1>
  <div class="col-md-4 col-sm-4 col-xs-12">
    <div class="div-image">
      <h4>Probando cosas</h4>
      <article class="images">
        <img class="static-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV2?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693558353">
        <img class="rotate-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV1?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693193136">
      </article>
    </div>
  </div>
</article>

The center works correctly.

If you look at the upper left corner of the image, you see that this point coincides with half the div div-image . We have to make the center of the image at the center of the div .

What you can do is add a transform to move those images 50% of their size to the left

transform: translate(-50%);

Example:

.static-image{
    position: absolute;
    transform: translate(-50%);
}
.rotate-image{
    position: absolute;
    -webkit-transition: transform .2s;
    transition: transform 1s, margin-left .6s, margin-top .6s;
    transform: translate(-50%);
}

body{
    overflow-x: hidden;
    background: #f2f2f2;
}
.my-navbar{
    background: rgba(0,0,0,.8);
    border:none;
    border-radius: 0px !important;
}
.div-image{
    margin:50px auto;
    float:none;
    min-height: 350px;
    transition: color 1s, font-size 1s;
}
.div-image:hover{
    color: rgb(90,200,120);
    font-size: 20px;
}
.static-image{
    position: absolute;
    transform: translate(-50%);
}
.rotate-image{
    position: absolute;
    -webkit-transition: transform .2s;
    transition: transform 1s, margin-left .6s, margin-top .6s;
    transform: translate(-50%);
    
}
.rotate-image:hover{
    transform: rotate(15deg);
    margin-left: 50px;
    margin-top: 30px;
}
.center-element{
    margin:0px auto !important;
    float:none !important;
}
.no-margin{
    margin: 0px !important;
}
.no-padding{
    padding: 0px !important;
}
.white-text{
    color: #FFFFFF;
}
.black-text{
    color: #000000;
}
.gray-text{
    color: #c9c9c9;
}
.red-text{
    color: #AE2629;
}
.blue-text{
    color: #18666A;

}

<article class="row" id="ip6">
	            <center><h1>iPhone</h1></center>
	            <div class="col-md-4 col-sm-4 col-xs-12">
	            	<div class="div-image">
	            		<center><h4>Probando cosas</h4>
						<img class="static-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV2?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693558353">
						<img class="rotate-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV1?wid=150&hei=305&fmt=png-alpha&qlt=95&.v=1472693193136"></center>
	                </div>
	            </div>
	           
	    </article>

For some reason, I would not know which answer, the image is centered in reference to the title, I tried without using the center tags and using text-align: center, but the same thing happened.

The solution I found was the following: take the images out of the center by modifying those lines as follows:

<div class="div-image">
  <center><h4>Probando cosas</h4></center>
  <div style="width:150px;margin:0 auto">
    <img class="static-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV2?wid=150&amp;hei=305&amp;fmt=png-alpha&amp;qlt=95&amp;.v=1472693558353">
    <img class="rotate-image" src="https://store.storeimages.cdn-apple.com/4662/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone7/jetblack/iphone7-jetblack-select-2016_AV1?wid=150&amp;hei=305&amp;fmt=png-alpha&amp;qlt=95&amp;.v=1472693193136">
  </div>
</div>