如何在父级中水平对齐iFrame div？

Question

What is happening 怎么了

What I want 我想要的是

I would like the #Demo-iFrame to be vertically aligned in its parent div #Demo-Card . 我希望#Demo-iFrame在其父div #Demo-Card垂直对齐。 If anyone could help me out with this, I would be quite appreciative! 如果有人可以帮助我，我将不胜感激！

Code 码

HTML 的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 的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 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. 框（iframe）始终完美居中。

HTML 的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 的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 Codepen： http ：//codepen.io/zsawaf/pen/LkdRWd

如何在父级中水平对齐iFrame div？

问题描述

What is happening 怎么了

What I want 我想要的是

Code 码

2 个解决方案

解决方案1
1 2016-07-20 18:19:38

解决方案2
1 已采纳 2016-07-20 18:48:31

如何在父级中水平对齐iFrame div？

问题描述

What is happening 怎么了

What I want 我想要的是

Code 码

2 个解决方案

解决方案1 1 2016-07-20 18:19:38

解决方案2 1 已采纳 2016-07-20 18:48:31

解决方案1
1 2016-07-20 18:19:38

解决方案2
1 已采纳 2016-07-20 18:48:31