關於居中

時間  2019-11-17
標籤 關於 居中 简体版
原文   原文鏈接

 

根據塊狀元素和行內元素的特性來區分css

塊狀元素：主要特色是能佔據一行，高度行高內邊距外邊距能控制，能容納內聯元素和其餘塊狀元素web

行內元素：不能獨佔一行，隨內容大小而定。沒法設置寬高，設置的外邊距只能在左右上起做用，上下沒有做用佈局

因此要根據元素的特性作的居中flex

父元素是塊狀元素，子元素是行內元素google

水平居中：flexbox

給父元素添加text-align:centerurl

---------------------舉一個栗子---------------------spa

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
     width :  200px ;
     height :  200px ;
     text-align :  center ;
     background :  #3cffff ;
}
.child{
    background :  #f9ffc3 ;
}
 
<div class= "parent" >
      <span class= "child"  >苗嗚嗚</span>
</div>

 

垂直居中：3d

子元素上添加line-height:父元素的高度code

---------------------舉一個栗子---------------------

?
1
2
3
4
5
6
7
8
9
10
11
.parent{
     width :  200px ;
     height :  200px ;
    }
    .child{
     line-height :  200px ;
    }
  <div class= "parent" >
      <span class= "child"  >苗嗚嗚</span>
    </div>
    

 

以上兩個方法合在一塊兒就是行內元素的垂直居中了

---------------------舉一個栗子---------------------

?
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent{
   width :  200px ;
   height :  200px ;
   background :  #3cffff ;
   text-align : center ;
}
.child{
   line-height :  200px ;
   background :  #f9ffc3 ;
}
<div class= "parent" >
   <span class= "child"  >苗嗚嗚</span>
</div>

若是是子元素是img,img元素比較特殊，屬於替換內聯元素, line-height對img沒有效果，沒法實現垂直居中

---------------------舉一個栗子---------------------

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent{
   width : 1000px ;
   height :  600px ; 
   background :  #3cffff ;
   text-align :  center ;
    }
.child{
   vertical-align :  middle ;
}
.child 2 {
   height :  100% ;
   width :  0 ;
}
<div class= "parent" >
   <img class= "child"  src= "http://f5.topitme.com/5/93/a8/115632420139ea8935o.jpg" >
   <img class= "child2" >
</div>


 

css爲child2的img是起到輔助做用，不要寫src，不然會多一個邊框，其實使用其餘行內元素也行，好比span,只要把該元素的高度設置爲父元素同樣的高度就好了。vertical-align這個屬性的特色，它是相對兄弟級行高（line-height）來定位，它只對行內樣式有效。下面設置一個img只是撐開父元素的行高。

關於內聯元素td的垂直水平居中

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
.parent{
   width : 200px ;
   height : 200px ;
   text-align :  center ;
   background :  #3cffff ;
}
<table class= "parent" >
   <tr>
     <td>～喵了個咪～</td>
   </tr>
</table>

用table-cell ，文字和圖片居中，可是background是鋪滿整個父元素，而不是居中

---------------------舉一個栗子---------------------

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent {
     width :  1000px ;
     height :  600px ;
     display : table;
     text-align :  center ;
     background :  #3cffff ;
}
 
.child {
     display :  table-cell ;
     vertical-align :  middle ;
     margin :  0  auto ;
     background :  #f9ffc3 ;
}
<div class= "parent" >
   <div class= "child" >～喵了個咪～</div>
</div>

 

 

 

父元素是塊狀元素，內元素是塊狀元素

1.水平居中

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent{
width : 1000px ;
height : 600px ;
position : relative ;
background :  #3cffff ;
}
.child{
width : 200px ;
height : 200px ;
margin :  0  auto ;
background :  #f9ffc3 ;
}
<div class= "parent" >
     <div class= "child" ></div>
</div>

 

2.若是要讓上面的垂直水平居中的話，要多加一個position:absolute,left:0;right:0;top:0;bottom:0;

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent{
   width : 1000px ;
   height : 600px ;
   position : relative ;
   background :  #3cffff ;
}
.child{
   width : 200px ;
   height : 200px ;
   margin :  auto ;
   position : absolute ;
   left : 0 ;
   right : 0 ;
   top : 0 ;
   bottom : 0 ;
   background :  #f9ffc3 ;
}
<div class= "parent" >
     <div class= "child" ></div>
</div>

 

3.藉助其餘元素實現垂直水平居中

記得把輔助元素放在子元素前面哈。

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent{
     position :  relative ;
     width： 1000px ;
     height : 600px ;
}
.child -2 {
     height :  50% ;
     margin-bottom :  -100px ;  /*是child的(padding+height)/2*/
}
.child{
     width : 200px ;
     height : 200px ;
     margin :  auto ;
}
<div class= "parent " >
      <div class= "child-2" ></div>
      <div class= " child" ></div>
</div>

 4.垂直居中 行內元素 塊狀元素均可以

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent{
   display :  block ;
   position :  relative ;
   width : 1000px ;
   height : 600px ;
   background :  #3cffff ;
}
.parent:after{
   display : inline- block ;
   vertical-align :  middle ;
   content :  '' ;
   height :  100% ;
   background :  #f9ffc3 ;
}
.child{
   display : inline- block ;
   vertical-align :  middle ;
}
<div class= "parent" >
      <div class= "child" ></div>
</div>

5.彈性盒式佈局  ie11以上才支持  只針對父元素作了設置，子元素不須要設置。

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.parent{
   width : 1000px ;
   height : 1000px ;
   display : -webkit-box;
   display : -moz-box;
   display : -ms-flexbox;
   display : -webkit-flex;
   display : flex;
   -webkit-align-items: center ;
           align-items: center ;
   -webkit-justify- content : center ;   /*適用於父元素*/
           justify- content : center ;
           background :  #3cffff ;
}
.child{
   width : 200px ;
   height : 200px ;
   background :  #f9ffc3 ;
}
<div class= "parent" >
      <div class= "child" ></div>
</div>

6.使用margin-top;

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent{
   position :  relative ;
   width : 1000px ;
   height : 600px ;
   background :  #3cffff ;
}
.child{
   width : 200px ;
   height : 200px ;
   position :  absolute ;
   top : 50% ;
   left :  0 ;
   right :  0 ;
   margin :  auto ;
   margin-top :  -100px ;
   background :  #f9ffc3 ;
}
<div class= "parent" >
      <div class= "child" ></div>
</div>

7.根據上面還有一種傳統的你們都通用的辦法，這個辦法具備兼容性，兼容到ie6

父元素的position和子元素的position不能相同，要麼父元素爲absolute，子元素爲relative，要麼父元素爲relative,子元素爲absolute;

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent {
   width :  1000px ;
   height :  600px ;
   background :  #c3ffff ;
   position :  relative ;
   /*必須加上，不然child不能居中*/
}
     
.child {
   width :  200px ;
   height :  200px ;
   margin :  -100px  0  0  -100px ;
   position :  absolute ;
   left :  50% ;
   top :  50% ;
   background :  #f9ffc3 ;
}
<div class= "parent" >
      <div class= "child" ></div>
</div>

8.用transform,只設置子元素

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent{
   width : 1000px ;
   height : 600px ;
   background :  #3cffff ;
}
.child{
   width : 200px ;
   height : 200px ;
   position : relative ;
   top :  50% ;
   left :  50% ;
   transform:translate( -50% , -50% );
   -webkit-transform:translate( -50% , -50% ); 
   background :  #f9ffc3 ;
}
<div class= "parent" >
      <div class= "child" ></div>
</div>

9.若是居中是一張圖片的話，其實用background也就能夠了

---------------------舉一個栗子--------------------- 

?
1
2
3
4
5
6
.parent{
   background :  url (http://f 5 .topitme.com/ 5 / 93 /a 8 / 115632420139 ea 8935 o.jpg)  no-repeat  center   center  #3cffff ;
   width : 1000px ;
   height : 600px ;
}
<div class= " parent" ></div>

 

就是這樣，我已知的居中方法就這些，若是有人還有更好的方法或者我上面有錯的地方及時提出哈～

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程