地  址:江苏省南京市玄武区玄武湖
电  话:4008-888-888
邮  箱:9490489@qq.com
商  务QQ:2832830888
网站制作免费模板:网站前端常识分享:9种容器居中的小技巧
作者:管理员    发布于:2020-06-01 01:13   文字:【】【】【
align-items:Center; }
方法3:肯定定位和负边距 复制代码 .box3{position:relative;}
 .box3 span{ position: absolute;
 width:100px;
 height: 50px;
top:50%;
left:50%;
 margin-left:-50px;
margin-top:-25px;
text-align: center; }
方法4:肯定定位
 .box4 span{ width: 50%; height: 50%; background: #000; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
这种方法跟上面的有些类似,可是这里是通过margin:auto和top,left,right,bottom都设置为0完成居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较合适移动端。
方法5:translate .box6 span{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; }
这实践上是方法3的变形,移位是通过translate来完成的。
 方法6:display:inline-block .box7{ text-align:center; font-size:0; } .box7 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box7:after{ content: width:0; height:100%; display:inline-block; vertical-align:middle; }
这种方法确实奇妙...通过:after来占位。
 方法7:display:flex和margin:auto
 .box8{ display: flex; text-align: center; } .box8 span{margin: auto;}
方法8:display:-webkit-box .box9{ display: -webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-box-orient: vertical; text-align: center }
 css3博学多才,可以完成很多发明性的效果,需要好好研讨下。
 方法9:display:-webkit-box 这种方法,在 content 元素外刺进一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 content 清除浮动,并显示在中心。
Content here
.floater { float:left; height:50%; margin-bottom:-120px; } .content { clear:both; height:240px; position:relative; }
利益: 适用于所有阅读器 没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条呈现
缺点: 仅有我能想到的就是需要额定的空元素了(也没那么糟,又是另外一个话题)
扩展阅读:



天津网站建设首选品牌
参谋:9


科技是专业从事天津网站建设、天津网站制造、软件开发、移动建站、商城、微信端、app开发项目
软件事业部:天津市大学软件学院D-510(天津工业大学院内)
网站事业部: 天津市河北区北宁弯万福日子广场9-1208(华为手机旗舰店旁进口)
咨询热线:9 3
Copyright © 2002-2020 制作网页_国外最好的免费建站_免费h5页面制作网站_团购网站建设_免费动画制作网站 版权所有 (网站地图
地址:江苏省南京市玄武区玄武湖 电话:4008-888-888
邮箱:9490489@qq.com QQ:2832830888