设置div居中显示


设置宽高
方法一:
.container{

​ position:absolute;

​ width:500px;

​ height:500px;

​ top:50%;

​ left:50%;

​ transform:translate(-50%,-50%);

​ background:#ccc;

}
方法二:
.container{

​ width:200px;

​ height:200px;

​ position:absolute;

​ top:0;

​ left:0;

​ right:0;

​ bottom:0;

​ margin:auto;

}
方法三:
.container{

​ width:200px;

​ height:200px;

​ position:absolute;

​ background:#ccc;

​ top:50%;

​ left:50%;

​ margin-top:-100px;//设置为宽高的一半

​ margin-left:-100px;

}
方法四:

#div1{

​ width:700px;

​ heigth:600px;

​ background:orangen;

​ display:flex;

​ aligin-items:center;

​ justify-content:center;

}

div2{

​ width:200px;

​ height:200px;

​ background:orchild;

}
未设置宽高
方法一:

box{

​ position:flex;

​ top:50%;

​ left:50%;

​ background:#ccc;

​ width:50%;

​ height:50%;

​ transform:translateX(-50%) tanslateY(-50%);

}
方法二:

#div1{

​ position:fixed;

​ width:100%;

​ height:100%;

​ top:0;

​ left:0;

}

div2{

​ position:absolute;

​ top:0;

​ left:0;

​ right:0;

​ width:50%;

​ height:50%;

​ margin:auto;

​ bottom:0;

​ background:#ccc;

}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM