居中
日常工作常用到居中,方法很多,在这里梳理几种常见方法
水平居中
大致列表,主要有三类:
1.适用块级元素水平居中
居中元素css: margin:0 auto
2.适用行内元素水平居中
父元素: text-align:center
3.需要已知居中元素的宽
居中元素::left:50%;margin-left: -(居中元素宽/2);
水平垂直居中
绝对定位居中
父元素:
position: relative
居中元素:
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
overflow: auto;
讲一讲这个的原理,先把居中元素从文档流脱离所以设置了绝对位置,父元素设置相对位置就可以包裹绝对位置的居中元素,四个边的绝对路径为0,其实是为了重绘(让浏览器重新计算四个边)使居中元素的block充满父元素的可用空间,这时候margin:auto就有效果,使之自适应居中,overflow自然是为了让超出父元素自适应。
适用于自适应不知长宽的居中
display:flex
父元素:
display: flex;
justify-content:center;
align-items:Center;
display:flex是一种常用于移动端的布局,多栏多列布局。
这里提供了两个属性可居中,需要兼容多个浏览器写前缀,不知道的可自行学习。
display:table-cell
父元素:
text-align:center;
display:table-cell;
vertical-align: middle
display:table-cell是一种表格式布局,想深入了解可看看张鑫旭的博客(css牛人)
http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
负边距居中
居中元素:
width: xx; height: xx;
position: absolute;
top: 50%; left: 50%;
margin-top: -(高/2)px;
margin-left: -(宽/2)px;
需要知道居中元素的宽高
translate居中
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
图片自适应居中
(1)
父元素:
display: table-cell;
vertical-align:middle;
text-align:center;
width:200px;
height:200px;
子元素:
vertical-align:middle;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
(2)
居中元素:
position: relative;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);