头部 - HOME-重庆快乐10分开奖
联系我们

广西贵港市新联网络科技有限公司

地址:广西贵港市正佳电子城4楼426室

电话:0775-4558819

手机:15907857025

联系人:郑先生

网址:重庆快乐10分开奖 www.qsrn.net

资讯中心 您现在所在位置:重庆快乐10分开奖 > 资讯中心 > 行业新闻

前端小知识:容器居中的九种方法

发布时间:2019-02-21
方法1:table-cell html结构:
垂直居中
css: .box1{ display: table-cell;
vertical-align: middle;
 text-align: center; }
方法2:display:flex .box2{ display: flex;
justify-content:center;
align-items:Center; }
方法3:绝对重庆快乐10分开奖码 .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 不会被截断,滚动条出现 缺点: 唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
头部 - HOME-重庆快乐10分开奖
建站流程

Copyright 2010-2018 广西贵港市新联网络科技有限公司 版权所有 All rights reserved

地址:广西贵港市正佳电子城4楼426室 电话:0775-4558819 15907857025

ICP证:桂ICP备11005107号-4

关闭

  •  联系热线
  •  15907857025