CSS居中DIV包含其他DIV

如何使用CSS在div内水平居中div？我正在尝试，我得到它从左侧和右侧居中，但我不能从顶部和底部居中。CSS居中DIV包含其他DIV

 html { 
     height:100%; 
    } 
    body { 
     padding:0px; 
     margin: 0px; 
     height:100%; 
    } 
    #openFrame { 
     position:fixed; 
     top:0px; 
     width:100%; 
     left:0%; 
     height:100%; 
    } 
    .main { 
     position: absolute; 
     width: 80%; 
     max-height: 100%; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: auto; 
    } 
    #vid { 
     width:100%; 
     max-height:100%; 
     vertical-align: middle; 
    } 
    #bottom { 
     width:100%; 
     height:69px; 
     background-color: green; 
     background-repeat: no-repeat; 
     background-position: top center; 
     background-size: contain; 
    }

来源

2015-06-22 Blair

可能重复[如何垂直居中一个div所有的浏览器？（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div -for-all-browsers） –

https://jsfiddle.net/ozgul/epm4y8jy/请参阅预览 – Blair

垂直居中DIV是有点麻烦。基本上你必须将其设置为position至absolute和容器的position至relative。然后，将top和left值设置为50％，并通过应用负边距减去要居中的元素的宽度/高度的一半。

Codepen example

<!DOCTYPE html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <style type="text/css"> 
     body, html, #container { 
      height: 100%; 
      width: 100%; 
     } 
     #container { 
      position: relative; 
     } 
     #content { 
      width: 300px; 
      height: 300px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-top: -150px; 
      margin-left: -150px; 
      background-color: red; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="content"></div> 
     </div> 
    </body> 
</html>

的

来源

2015-06-22 21:29:13

谢谢你，但仍然没有得到任何地方 – Blair

也许说为什么？这样，没有人能够帮助你。我检查了你的jsfiddle，并且存在很多问题。另外，它看起来不像你尝试的解决方案。请尝试解决方案，并创建一个jsfiddle然后张贴它，这样我可以检查什么是错的。另一件事：当你做绝对定位时，将0px分配给顶部和底部是没有意义的。这意味着它从顶部是0px，从底部是0px，这是不可能的。在这里看到更多：http://www.w3schools.com/css/css_positioning.asp –

你必须做一些工作。这是一个回答问题的网站，而不是其他人为你写代码的地方。 –

CSS居中DIV包含其他DIV

回答

相关问题