课时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

 

转载于:https://www.cnblogs.com/Naomi-love/p/5980341.html