纯CSS实现容器基于窗口垂直居中（仅支持IE8+及现代浏览器）

最新推荐文章于 2025-07-02 15:54:47 发布

weixin_33843947

最新推荐文章于 2025-07-02 15:54:47 发布

阅读量104

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/jsan/blog/141297

本文提供了两种实现网页元素在浏览器窗口中垂直居中的方法。方法一利用CSS的position属性配合transform实现精确定位；方法二则通过设置div的position为fixed，并使用after伪元素和inline-block布局达到居中效果。

为什么80%的码农都做不了架构师？>>>

1. 方法1：

<!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>

2. 方法2：

<!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: -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>

转载于:https://my.oschina.net/jsan/blog/141297