将div定位到视口中心的3种常见方法

将div定位到视口中心的3种常见方法

1.已知div宽高，通过计算定位到视口中心

<div></div>

			position: absolute;
			//先让div继承视口50%的宽高，此时div最左上角应该在视口最中心的位置
			//然后移动div自身宽高的一半
			left:50%
			top:50%;
			left:100px;
			top:100px;
			/*
			也可以使用calc函数一步到位
			通过calc计算出需要移动的值
            left:calc(50% - 100px);
            top:calc(50% - 100px);
            */
            
            width: 200px;
            height: 200px;
            border: 1px solid #fff;

2.div宽高未知

			//通过position将margin撑开
			position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            
            //然后auto
            margin: auto;
            height: 200px;
            width: 200px;
            border: 1px solid #fff;

3.同样是div宽高未知（通过cs3中transform:translate()进行定位）

	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(50%,50%);