2020-12-02 Css3/Flex 你要的水平居中&&垂直居中、等宽度自适应布局方案

一：水平&&垂直居中:

1：内联元素

display:inline/inline-block。不独占一行，同行显示，直到右边边距为止换行。
常见元素：span/img/input/button/label等。
实现要点：text-align: center;设置水平居中；设置line-height等于所在容器高度。（ line-height: 200px;height: 200px; ）

 #container {
            width: 600px;
            height: 200px;
            background-color: cadetblue;
            text-align: center;
            line-height: 200px;
        }
 

      内联元素水平垂直居中
 
 

2：块状元素:

display:block/table。默认独占一行。常见元素：div/h1/h2……/p/table/ul/ol等。
实例2.1：
实现要点：
1：定位left: 50%;top: 50%;设置元素初始位置在水平方向一半与垂直方向一半的交叉点处:
2：margin-left: -150px; margin-top: -30px;设置元素自身偏移位置为对应元素宽度/高度的一半。
弊端： 必须知道元素宽度和高度

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
           width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -40px;
        }
    

        
已知元素的宽度和高度
    
       

2-1.png

实例2.2：
实现要点：
1：通过定位， left: 50%;top: 50%;设置元素初始位置在水平方向一半与垂直方向一半的交叉点处:
2：CSS 属性transform: translate(-50%,-50%);自动计算元素向左/向上偏移元素自身宽度/高度一半。
弊端：因使用CSS属性，对于低版本浏览器兼容性不好

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
            width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
     

        
子元素的宽度和高度未知。使用css3 transform: translate控制偏移
     
       

trans.png

实例2.3：
实现要点：
1：通过定位， left: 50%;top: 50%;设置元素初始位置在水平方向一半与垂直方向一半的交叉点处:
2：CSS 属性transform: translate(-50%,-50%);自动计算元素向左/向上偏移元素自身宽度/高度一半。
优点：无需知道元素宽度&&高度 浏览器兼容性好

       #box {
            width: 500px;
            height: 200px;
            background-color: cadetblue;
            position: relative;
        }
        #item {
            position: absolute;
            width: 200px;
            height: 80px;
            background-color: cornsilk;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;           
        }
     

        
1：元素宽度/高度未知 2：未使用CSS3属性，浏览器兼容性更佳 
    
       

二：等宽度自适应

元素宽度随着父级容器宽度，自动计算。
实例1：
适用场景：列表排列，列数为偶数最佳，方便计算宽度百分比。
实现要点：使用百分比设置元素宽度，如需设置水平外边距时，使用百分比，其数值应该加上元素宽度。（23%+21%）4 = 100%。

       #box1 {                    
            height: 140px;
            background-color: cadetblue;
        }
        .item {           
            width: 23%;
            height: 80px;
            background-color: cornsilk;
            float: left;
            margin: 10px 1%;
            border: 2px solid #ccc;
            box-sizing: border-box;           
        }
   

        
1
        
2
        
3
        
4
      
    

item.png

实例2：
适用场景： 列表排列，列数为偶数最佳，方便计算宽度百分比。
实现要点： 使用百分比设置元素宽度，如需设置水平外边距时，不用计算其百分比值。

        #box2{
            background-color: darkcyan;
            display: flex;           
        }
        .list{
            width: 25%;
            height: 80px;
            background-color: cornsilk;          
            margin: 20px;
            border: 2px solid #ccc;
           
        }
    

        
1
        
2
        
3
        
4
      
    

list.png