最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

水平居中

1. 通過 margin 水平居中

 
 
 

  
  
  
/* 1. 通過margin 水平居中 */ 
  
  
  
.box { 
  
  
  
    width: 200px; 
  
  
  
    height: 200px; 
  
  
  
    background-color: orange; 
  
  
  
} 
  
  
  
.align { 
  
  
  
    margin: 0 auto; 
  
  
  
} 
 
 
 

2. 通過 position 和 transform 水平居中

 
 
 

  
  
  
/* 2.通過 position 和 transform 水平居中 */ 
  
  
  
.box { 
  
  
  
    width: 200px; 
  
  
  
    height: 200px; 
  
  
  
    background-color: orange; 
  
  
  
} 
  
  
  
.align { 
  
  
  
    position: relative; 
  
  
  
    left: 50%; 
  
  
  
    transform: translateX(-50%); 
  
  
  
} 
 
 
 

3. 通過flex水平居中

 
 
 

  
  
  
body {  
  
  
  
 
  
  
  
    display: flex;  
  
  
  
    justify-content: center;  
  
  
  
}  
 
 
 

通過 text-align:center 水平居中

注意:使用text-align的時候,子元素要設置為行內(nèi)塊元素,是利用了行內(nèi)元素的特性

 
 
 

  
  
  
body { 
  
  
  
    text-align: center; 
  
  
  
} 
  
  
  
.box { 
  
  
  
    display: inline-block; 
  
  
  
    width: 200px; 
  
  
  
    height: 200px; 
  
  
  
    background-color: orange; 
  
  
  
} 
 
 
 

垂直居中

1. flex布局垂直居中

可以在父類上加 align-item:center實現(xiàn)垂直居中

 
 
 

  
  
  
body { 
  
  
  
    height: 100vh; 
  
  
  
    display: flex; 
  
  
  
    align-items: center; 
  
  
  
} 
 
 
 

也可以在子類元素上加 align-self:center 實現(xiàn)垂直居中

 
 
 

  
  
  
.box { 
  
  
  
    align-self: center; 
  
  
  
    width: 200px; 
  
  
  
    height: 200px; 
  
  
  
    background-color: orange; 
  
  
  
} 
 
 
 

通過position和transform 來垂直居中

 
 
 

  
  
  
/* 第二種方案 position和transform */ 
  
  
  
.vertical{ 
  
  
  
    position: relative; 
  
  
  
    top: 50%; 
  
  
  
    transform: translateY(-50%); 
  
  
  
} 
 
 
 

絕對居中

flex布局實現(xiàn)絕對居中

 
 
 

  
  
  
body { 
  
  
  
    height: 100vh; 
  
  
  
    display: flex; 
  
  
  
    align-items: center; 
  
  
  
    justify-content: center; 
  
  
  
} 
 
 
 

通過 position和transform 實現(xiàn)絕對居中

 
 
 

  
  
  
/* 第二種方案 position和transform */ 
  
  
  
.box { 
  
  
  
    position: relative; 
  
  
  
    top: 50%; 
  
  
  
    left: 50%; 
  
  
  
    transform: translate(-50%, -50%); 
  
  
  
}