标签:isl otto 水平 垂直 isp text tab enter round
<div class="container">
<div class="content">我是内容盒子</div> </div> /*方法一:position margin: auto*/ .container { position: relative; } .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /*注:当内容没有宽度高度时会充满整个空间可以用max-height来限制*/ /*方法二:position top: 50% left: 50%; margin-top:-50%*height margin-left:-50%*width*/ .container { position: relative; height: 800px; } .content { width: 200px; height: 200px; background: red; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } /*方法三:position translate*/ .container { position: relative; height: 800px; } .content { width: 200px; height: 200px; background: red; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /*方法四:display:flex*/ .container { height: 800px; /*父元素不能设置百分数,需要有一定的高度*/ display: flex; /*需要处理兼容性问题*/ justify-content: center; align-items: center; } .content { width: 200px; height: 200px; background: red; } /*方法五: 父:dislay:table-cell */ .container { width: 1366px; height: 800px; display: table-cell; text-align: center; vertical-align: middle; } .content { width: 200px; height: 200px; background: red; display: inline-block; }
标签:isl otto 水平 垂直 isp text tab enter round
原文地址:https://www.cnblogs.com/xiyuyizhihua/p/11125754.html