前言：今天學的有點少，主要是有點迷.... 這是昨天沒寫的

一、水平居中

.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%)     
}

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

CSS布局總結（三）