css中居中總結

借鑑文章：http://www.javashuo.com/article/p-wmtrqobk-bn.html

真實以本篇爲準，有遺漏，歡迎補充

一、水平居中

1.一、行內元素的水平居中（span、文字、圖片、input）

父級 {

text-align: center;

}

 

1.二、塊級元素水平居中：分狀況

>> 有寬度的塊級元素

自己 {

margin: 0 auto;

}

 

自己 { //推薦

margin-left: auto;

margin-right: auto;

}

 

>> 寬度不固定的元素：

方法一：定位+位移法

父級{position: relative;}

子級{

position: absolute;

left: 50%;

transform:translateX(-50%);

}

方法2: 經過給父元素設置 float，而後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

.wrap{

float:left;

position:relative;

left:50%;

clear:both;

}

.wrap-center{

position: relative;

left:-50%;}

}

方法3：flex法

父級{

display: flex;

flex-direction: row;//設置主軸

justify-content: center;//主軸方向居中

}

 

二、垂直居中

 

2.一、行內元素（span、img、文字）垂直居中：

父級 {

height : 100px;

line-height: 100px;

}

 

2.二、塊級元素：表格佈局法

父級 {

display: table-cell;

vertical-align: middle;

}

 

三、水平垂直居中：

3.1：必須有寬度：定位法：上下左右爲0，margin：auto

自己 {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

width: 200px;

height: 200px;

background: red;

}

 

3.2 

.center {

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

width: 200px;

height: 200px;

background: red;

} 

 

3.3 flex法：讓元素在父級框裏是水平垂直居中的

.fa{

display:flex;

flex-direction: row;//肯定主軸

align-items: center;//交叉軸居中

justify-content: center;//主軸居中

border: 1px solid greenyellow;

}

3.4 grid方式

.parent { 
   height: 140px;
   display: grid;
 } 

.child { 
  margin: auto; 
}