CSS布局总结(三)

前言:今天学的有点少,主要是有点迷.... 这是昨天没写的

 

一、水平居中

.parent{
  text-aglin:center;  
}
.child{
  display:inline-block;  
}

 

.parent{
  display:table;
  margin:0 auto;    
}

 

在知道元素的宽度的情况下

.child{
  width:500px;
  position:absolute;
  left:50%;
  margin-left:-250px;      
}

 

知道元素的宽度的情况下

.child{
  position:absolute;
  top:50%;
  left:50%
  transform:translateX(-50%);     
}

 

二、垂直居中

.parent{
  display:table-cell;
  vertical-aglin:middle;  
}

 

.child{
  position:absolute;
  top:50%;
  transform:transitionY(-50%);     
}

 

.parent{
  display:flex;
  aglin-items:center;    
}

 

二、水平垂直居中

第一种:

.parent{
  display:table-cell;
  vertical-aglin:middle;
  text-aglin:center;    
}

.child{
  display:inline-block;  
}

 第二种:

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

 第三种:

html,body{
        height: 100%;
      }
        .parent{
            position: relative;
            height: 100%;
        }
        .child{
     width: 200px;
     height: 200px;
     background-color: #6699FF;
     margin:auto;
     position: absolute;        
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     background-color: red;
     }

第四种:

.parent{
  display:flex;
  aglin-items:center;  
  justify-content:center;  
}

 

posted @ 2018-11-28 23:09  里德曼有驴耳朵  阅读(151)  评论(0编辑  收藏  举报