首页 > 代码库 > css的几种垂直水平居中方法
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的几种垂直水平居中方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。