水平垂直居中css解决方案

方法一：

.wrap{

　　width:600px;

　　height:600px;

　　border:1px solid #000;

　　margin:30px auto;

　　position:relative;

}

.box{

　　width:300px;

　　height:300px;

　　background:red;

　　position:absolute;//一定要有的属性

　　left:0;

　　right:0;

　　top:0;

　　bottom:0;

　　margin:auto;

}

方法二：

.wrap{

　　width:600px;

　　height:600px;

　　border:1px solid #000;

　　margin:30px auto;

　　position:relative;

}

.box{

　　width:300px;

　　height:300px;

　　background:red;

　　position:absolute;//一定要有的属性

　　left:50%;

　　top:50%;

　　margin-left:-150px;

　　margin-top:-150px;

}

 

方法三：

　　使用flex布局（弹性盒模型）

　　.wrap{

       　　width: 300px;

　　　　height: 300px;

　　　　display: flex;

　　　　justify-content: center;

　　　　align-items: center;

　　}

　　.box{

　　　　width: 100px;

　　　　height: 100px;

　　　　background: gold;

　　}

 

<div class="wrap">

　　<div class="box"><div>

</div>

 

转载于:https://www.cnblogs.com/shizhihong/p/9141272.html