星空网 > 软件开发 > 网页设计

css的几种垂直水平居中方法

总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。

*1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins;

.div {   width: 200px;  height: 200px;  margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; }

2.不知道元素的宽高,仅仅实现某个div是其父的1/2,水平垂直居中,随着父元素的大小等比例放大或者缩小。

.div{  position: absolute;  left: 30%;  right:30%;  top: 25%;  bottom:25%;}

*3.translate,宽度已知,高度未知的情况下

.wrap{  width:200px;//也可以不写,默认占总宽度的50%  position: absolute;  top:50%;  left:50%;  transform: translate(-50%,-50%);  -webkit-transform: translate(-50%,-50%);}

4.table-cell,div本身高度未知,仅仅实现垂直居中的情况下,ps,此种情况div宽度是100%

.wrap{//外层容器  display: table; }.div{//内层容器  display: table-cell;   vertical-align: middle; }

*5.flex布局,宽度都不固定的情况下,只要在父容器中设置display:flex即可。

.wrap{  display: flex;   display: -webkit-flex;   justify-content: center;  align-items: center;	} 

6.hack方法,善于运用:after。

.wrap {    text-align: center;   overflow: auto; }  .wrap:after, .div {   display: inline-block;   vertical-align: middle; }  .div:after {   content: '';   height: 100%;   margin-left: -0.25em; /* 需要根据不同的字号做调整 */ }  .wrap {   max-width: 99%; /* 防止文档过长时会到容器的顶部 */   max-width: calc(100% - 0.25em) /* Only for IE9+ */  } 

  

  

  

  




原标题:css的几种垂直水平居中方法

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流