Css3方法的等分

最新推荐文章于 2024-08-26 10:04:29 发布

chentian888

最新推荐文章于 2024-08-26 10:04:29 发布

阅读量2.5k

点赞数 1

分类专栏：移动端文章标签： css3 移动等分 flex

本文链接：https://blog.csdn.net/JSCTO/article/details/52421404

版权

移动端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

移动端常用的集中居中的方法

flex方法
table方法
translate方法

下面贴上代码

水平居中

公用样式

    ul{margin: 0;padding: 0;}
    li{list-style: none;}
    .demo{line-height:44px;  margin-bottom: 20px;  text-align: center;  background-color: #0078e7;  color: #fff;}

一、`flex`

    <ul class="flex-equal demo">
        <li>手机</li>
        <li>联系人</li>
        <li>信息</li>
        <li>主屏</li>
    </ul>
    <ul class="flex-equal demo">
        <li>手机</li>
        <li>联系人</li>
        <li>信息</li>
    </ul>

    .flex-equal{display: flex;}
    .flex-equal li{flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;}

二、`table`

    <ul class="table-equal demo">
        <li>手机</li>
        <li>联系人</li>
        <li>信息</li>
        <li>主屏</li>
    </ul>
    <ul class="table-equal demo">
        <li>手机</li>
        <li>联系人</li>
        <li>信息</li>
    </ul>

    .table-equal{display: table;table-layout: fixed;width: 100%;}
    .table-equal li{display: table-cell;}

垂直居中

公用样式

    .demo-center{border: 1px solid #ccc;  margin:20px;  height:200px;position: relative;}
    .demo-center .children{background: #0078e7;  color: #fff;  width:150px;  line-height:5;  text-align:center;}

一、`translate`

    <div class="translate-center demo-center">
        <div class="children">子元素水平垂直居中</div>
    </div>

    .translate-center{position: relative;}
    .translate-center .children{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}

二、`flex`

    <div class="translate-center demo-center">
        <div class="children">子元素水平垂直居中</div>
    </div>

    .flex-center{display: flex;-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}