课时3—等分居中
一:等分
1) table等分
没有兼容问题,主要设置父元素的,display:table;table-layout:fixed;width:100%;
然后设置子元素,dislay:table-cell;
css:
.table-cell{
display:table;
table-layout:fixed;
width:100%;
background-color:blue;
text-align:center;
color:#fff
}
.table-cell li{
display:table-cell;
}
html:
<h2>table等分</h2> <ul class="table-cell"> <li>分类</li> <li>分类</li> <li>分类</li> <li>分类</li> <li>分类</li> </ul>
2)flex等分
.flex-cell{
display:flex;
display: -webkit-flex; /* Safari */
width:100%;
background-color:blue;
text-align: center;
color: #fff;
}
.flex-cell li{
flex:1 1 0%;
}
<h2>flex等分</h2> <ul class="flex-cell"> <li>分类</li> <li>分类</li> <li>分类</li> </ul>
注意,设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
注意: Internet Explorer 9 及更早版本不支持 flex 属性。
注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。
注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。 |
flex-shrink | 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。 |
flex-basis | 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
二 垂直居中
1)flex垂直居中
.flex-center{
display:flex;
justify-content:center;
slign-items:center;
}
.demo-center{
border:1px solid #ccc;
margin:20px;
height:200px;
}
.demo-center .children{
background:none repeat scroll 0% 0% #0078E7;
color:#fff;
width:150px;
line-height:5;
text-align:center;
}
<h2>flex居中</h2> <div class="flex-center demo-center"> <div class="children">子元素水平垂直居中</div> </div>
2)translate垂直居中
.translate-center {
position: relative;
}
.demo-center {
border: 1px solid #CCC;
margin: 20px;
height: 200px;
}
.demo-center .children {
background: none repeat scroll 0% 0% #0078E7;
color: #FFF;
width: 150px;
line-height: 5;
text-align: center;
}
.translate-center .children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
<h2>translate垂直居中</h2> <div class="translate-center demo-center"> <div class="children">子元素水平垂直居中</div> </div>
3) 两端对齐 justify
.justify {
display: flex;
justify-content: space-between;
padding: 0px 10px;
background: none repeat scroll 0% 0% #0078E7;
color: #FFF;
line-height: 32px;
}
<h2>两端对齐</h2> <div class="justify"><h2>左边对齐</h2><span>右边对齐</span></div>
总结
如果你开始做移动端,那么flex和transform这两大属性有必要熟练运用,运用好了能解决很多问题。一般来说flex可以用来实现一些布 局,再也不用动不动就float了;而transform中的rotate及translate则可以实现一些旋转及位移移动,旋转可以搞定图标的一些变 化,而位移移动则可以实现居中,位移动画等。
出处:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-uniform-and-center.html