Center Image Element in Parent Div

Align picture element in center of parent div keeps image aligned to left

As per my comments you need to remove the absolute positioning from the image but also add text-align center to the container:

.profile-banner {  display: block;  height: 500px;  text-align:center;}
.profile-banner picture {  display: block;  margin: 0 auto;}

<div id="CPHBigBanner_pnlCoverPhoto">  <section class="profile-banner lazy">    <picture class="profile-herobanner lazy" data-was-processed="true">      <source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="https://via.placeholder.com/350x150" data-was-processed="true">      <img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="Sample Image" srcset="https://via.placeholder.com/350x150" data-was-processed="true">    </picture>  </section></div>

CSS center image in a clipped parent div

http://codepen.io/gcyrillus/pen/BdtEj

use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.

.wrapper {
  width:300px;
  text-align:center;
  line-height:300px;
  height:300px;
  border:solid;
  margin:2em auto;
  overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;

  /* to show whats been cut off */
  position:relative;
  z-index:-1;
}

For horizontal only :

  .wrapper {
      width:300px;
      text-align:center;
      border:solid;
      margin:2em auto;
      overflow:hidden
    }
    img {
      margin:0 -100%;
      vertical-align:middle;
    }

center align (V & H) a div with an img in a parent div?

Below you find the desired effect by use of latest Bootstrap and additional styling. Please note that this also rectifies the inconsistencies you have in your code example with the proper headers, image links and bootstrap classes.

I have placed styling inline but you can move these to a separate file if you want.

The container is set to 100% of the view height in order to center the large image (the containing row) vertically.
The smaller image is vertically aligned by the calc function where we place the image 50% minus half the image height absolutely from the top (you'll have to take this into consideration if you add the @media ref below).

Please note that both images are responsive but since the smaller image maintains its original size for longer before resizing it looks like it's bigger than the background image on smaller devices.
You can alter this with the @media rule or with more advanced CSS but that's outside of the scope of your question.

(Consider using a background image instead as Ng-Sek-Long suggests)

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Centered images</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      </head>
      <body>
        <!-- Welcome area -->
        <div class="container-fluid d-flex justify-content-center align-items-center" style="min-height: 100vh;">
          <div class="row">
            <div class="col-xs-12" style="position: relative;">
              <img src="https://www.gruberreisen.at/fileadmin/redakteure/Website/slider/Header_Startseite1.jpg" class="img-fluid" />
              <div style="position: absolute; left: 0; top: calc(50% - 132px); width: 100%; text-align: center;">
                <img src="http://placehold.it/269x265/ccc.jpg" class="img-fluid" />
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Set the image in the center of a child div

Apply position:relative; for the parent div and apply

position:absolute;
top:50%;
margin-top:-30px; // height of element/2
}

for the element to be vertically centered…

If ancient browser support is not an issue you can use css3 flex,

apply

display:flex;
align-items:center;

for the parent div.

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.