How to horizontally align iFrame div within parent?

Question

What is happening

What I want

I would like the #Demo-iFrame to be vertically aligned in its parent div #Demo-Card . If anyone could help me out with this, I would be quite appreciative!

Code

HTML

    <div id="Demo-Pane" class="row-fluid no-lr-padding">
            <div id="Demo-Card">
                <div class="problem-header">
                    <h3><span class="problem-number">11</span> <span class="problem-equation">Problem</span></h3>
                </div>
                <!--<button id="Run">Run Demo</button>-->
                 <iframe id="Demo-iFrame" src="mathsynthesis/LearningByExample/GUI/web/mathsynth.html">
                        <p>Your browswer does not support iFrames</p>
                </iframe>
            </div>
    </div>

CSS

#Demo-Pane {
    background-color: #86E1D8;
    height: 90vh;
    width: 100%;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

#Demo-Card {
    background-color: white;
    width: 95%;
    height: 80vh;
    display: table;
    /*margin: 0 auto;*/
    overflow: hidden;

}

#Demo-Card iframe {
    display: block;
    margin: 0 auto;
    height: 130%;
    width: 95%; 
    zoom: 1;
    -ms-transform: scale(0.70);
    -moz-transform: scale(0.70);
    -o-transform: scale(0.70);
    -webkit-transform: scale(0.70);
    transform: scale(0.70);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

JSFiddle

Answer 1

Remove these styles and it will center.

-ms-transform: scale(0.70);
-moz-transform: scale(0.70);
-o-transform: scale(0.70);
-webkit-transform: scale(0.70); 
 transform: scale(0.70); 
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
 transform-origin: 0 0;

Answer 2

Take a look at the following mark up and styles.

The box (iframe) is always perfectly centered.

HTML

<html>

<body>
  <div class="main-content">
    <div class="header">
      <h3>11 Problem</h3>
    </div>
    <div class="iframe-container">
      <div class="iframe">
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
        <p>This box will emulate an iframe. I'll put whatever content in here. blah blah blah</p>
      </div>
    </div>

  </div>
</body>

</html>

CSS

body {
  padding: 0;
  margin: 0;
}
.main-content {
  border: 15px solid green;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}

.header {
  margin-left: 15px;
  h3 {
    font-size: 1.5em;
  }
}

.iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3.7em; // compensate for heading margin.
}
.iframe {
  width: 50%;
  height: 50%;
  background-color: #ccc;
  overflow: scroll;
  p {
    width: 90%;
    margin: 20px auto;
  }
}

Codepen: http://codepen.io/zsawaf/pen/LkdRWd

How to horizontally align iFrame div within parent?

Question

What is happening

What I want

Code

2 answers

solution1
1 2016-07-20 18:19:38

solution2
1 ACCPTED 2016-07-20 18:48:31

How to horizontally align iFrame div within parent?

Question

What is happening

What I want

Code

2 answers

solution1 1 2016-07-20 18:19:38

solution2 1 ACCPTED 2016-07-20 18:48:31

solution1
1 2016-07-20 18:19:38

solution2
1 ACCPTED 2016-07-20 18:48:31