• 块级元素的垂直居中对齐

    目前收集整理出了8种块级元素垂直居中对齐的方法

    第一种方法 利用定位+估算

     1 .parent{
 2              200px;
 3             height: 200px;
 4             position: relative;
 5             background: #888888;
 6         }
 7 .child{
 8              50px;
 9             height: 50px;
10             text-align: center;
11             line-height: 50px;
12             position: absolute;
13             top: 75px;
14             left: 75px;
15             background: brown;
16         }

    第二种方法 定位+margin：auto

     1 .parent{
 2              200px;
 3             height: 200px;
 4             position: relative;
 5             background: #888888;
 6         }
 7 .child{
 8              50px;
 9             height: 50px;
10             text-align: center;
11             line-height: 50px;
12             position: absolute;
13             top: 0;
14             left: 0;
15             bottom: 0;
16             right: 0;
17             margin: auto;
18             background: brown;
19         }

    第三种方法 定位+margin值估算，子元素高度不固定

     1 .parent{
 2              200px;
 3             height: 200px;
 4             position: relative;
 5             background: #888888;
 6         }
 7 .child{
 8             position: absolute;
 9             top: 50%;
10             left: 50%;
11             margin-left: -25px;
12             margin-top: -25px;
13             text-align: center;
14             line-height: 50px;
15             background: brown;
16         }

    第四种方法 定位+transform：translate

     1 .parent{
 2              200px;
 3             height: 200px;
 4             position: relative;
 5             background: #888888;
 6         }
 7 .child{
 8              50px;
 9             height: 50px;
10             text-align: center;
11             line-height: 50px;
12             position: absolute;
13             top: 50%;
14             left: 50%;
15             transform: translate(-50%,-50%);
16             background: brown;
17         }

    第五种方法 定位+calc函数

     1 .parent{
 2              200px;
 3             height: 200px;
 4             position: relative;
 5             background: #888888;
 6         }
 7 .child{
 8              50px;
 9             height: 50px;
10             text-align: center;
11             line-height: 50px;
12             position: absolute;
13             left: calc(50% - 25px);
14             top: calc(50% - 25px);
15             background: brown;
16         }

    第六种方法 子元素设置display:inline-block

     1 .parent{
 2              200px;
 3             height: 200px;
 4             text-align: center;
 5             line-height: 200px;
 6             background: #888888;
 7         }
 8 .child{
 9              50px;
10             height: 50px;
11             line-height: 50px;
12             display: inline-block;
13             vertical-align: middle;
14             background: brown;
15         }

    第七种方法 父元素设置display:table，子元素大小不固定，并设置display：table-cell

     1 .parent{
 2              200px;
 3             height: 200px;
 4             display: table;
 5             text-align: center;
 6             line-height: 200px;
 7             vertical-align: middle;
 8             background: #888888;
 9         }
10 .child{
11             display: table-cell;
12             background: brown;
13         }

    第八种方法 弹性布局display:flex 子元素高度不固定

     1 .parent{
 2              200px;
 3             height: 200px;
 4             display: flex;
 5             justify-content: center;
 6             align-items: center;
 7             background: #888888;
 8         }
 9 .child{
10              50px;
11             height: 50px;
12             text-align: center;
13             line-height: 50px;
14             background: brown;
15         }
  • 相关阅读:
    2021年1月4号
    2021年1月3号
    2021年1月2日
    2021年1月1日
    Jenkins定时构建与轮询SCM
    2017-08-22校验
    2017-08-21xlVBASplitSheetsSameTime
    20170821xlVBA跨表公式套用
    20170821xlVBA隐藏空行
    20170814xlVBA限定日期按客户分类汇总
  • 原文地址：https://www.cnblogs.com/lindang/p/13466339.html
Copyright © 2020-2023  润新知