純CSS基於窗口垂直居中

時間 2019-11-20

標籤 css 基於窗口垂直居中欄目 CSS 简体版

原文原文鏈接

都是IE8＋的html

<!DOCTYPE html>
<html>
    <head>
        <title>基於窗口垂直居中　by  司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      
        <style>
            body{
                background-image:url(about:blank); /* for IE6 */ 
            }

.fixed{
                position: fixed;
                left: 50%;
                top:50%;
                height: 0;/* 不佔據位置 */
                background-color: red;
            }

.relative{
                position: relative;
                left: -50%;/*處理水平方向 */
               /*處理垂直方向*/
                -webkit-transform: translateY(-50%) translateZ(0);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%) translateZ(0);

background-color: pink;
            }

.content{
                padding:80px;
                background-color: lightblue;

}

</style>

</head>
    <body >
    <h1<基於窗口垂直居中　by  司徒正美</h1>
        <button onclick="document.getElementById('dialog').style.display = 'block'">open</button>

<div class="fixed" id="dialog">
            <div class="relative">
                <div class="content"> 
                    <button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
                   XXXXXXXXXXXXXXXXX
                </div>
            </div>
        </div>

</body>
</html>

web

.fixed{
              position: fixed;
    left: -100%;
    right:100%;
    top:0;
    bottom: 0;
    background-color: #CCC;
    text-align: center;
    font-size: 0;

}
            .fixed:after {
               content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;

}

.content{
      display: inline-block;
  *display: inline;
  *zoom:1;
  vertical-align: middle;
  text-align: left;
  position: relative;
  right: -100%;
  font-size: 16px;
  background-color: lightgreen;
width：150px;
height: 150px;
            }

</style>

</head>
    <body >
        <button onclick="document.getElementById('dialog').style.display = 'block'">open</button>
        <h1>基於窗口垂直居中 2　by  司徒正美</h1>
        <div class="fixed" id="dialog">
         
                <div class="content"> 
                    <button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
                   XXXXXXXXXXXXXXXXX
                </div>
          
        </div>

</body>
</html>

ruby

相關連接：CSS未知高度垂直居中ui