400-650-7353

精品課程

您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】關于css居中

【Web前端基礎知識】關于css居中

  • 發布: Web前端培訓
  • 來源:Web前端干貨資料
  • 2020-08-26 18:39:25
  • 閱讀()
  • 分享
  • 手機端入口

CSS控制居中是前端開發中非常常用的布局技能,本文列出幾種CSS控制元素居中的幾種方法。

一、水平居中

  使用CSS控制水平居中很簡單:

· 塊級元素 設置width,并設置margin auto

· 內聯元素 父元素設置text-align center

HTML代碼如下:

  1. <div class="container"> 
  2.   <div class="content"> 
  3.     水平居中哦 
  4.   div> 
  5. div> 

1. 塊級元素水平居中

  1. .container { 
  2.   height: 300px; 
  3.   width: 300px; 
  4.   border: 1px solid red; 
  5.  
  6. .content { 
  7.   width: 10rem; 
  8.   border: 1px solid green; 
  9.   margin: 0 auto; 

2. 內聯元素水平居中

  1. .container { 
  2.   height: 300px; 
  3.   width: 300px; 
  4.   border: 1px solid red; 
  5.   text-align: center; 
  6.  
  7. .content { 
  8.   display: inline-block; 
  9.   border: 1px solid green; 

代碼很簡單,而且沒什么兼容性問題,所以通常也不需要用別的復雜方式來實現水平居中效果。

二、水平垂直居中

  使用CSS控制垂直居中(或者水平垂直居中)就不像控制垂直居中那么方便,這里主要羅列幾種。

1. flex布局

flex布局出現以后,垂直居中就很方便了,直接設置父元素:

  1. display flex 
  2. align-items center 

如果同時要水平居中,則同時設置:

  1. justify-content center 

需要注意的是IE10+才支持,webkit前綴瀏覽器設置flex屬性需要加webkit。

  1. .container { 
  2.   width: 300px; 
  3.   height: 300px; 
  4.   border: 1px solid red; 
  5.   display: -webkit-flex; 
  6.   display: flex; // 關鍵屬性 
  7.   align-items: center; // 垂直居中 
  8.   justify-content: center // 水平居中 
  9.  
  10. .content { 
  11.   border: 1px solid green; 

2. margin+ position:absolute布局

  position: absolute布局的元素,通過設置top/bottom, left/right這兩對屬性,可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的默認表現一樣!

上文中對于塊級元素的水平居中,我們設置寬度然后配合以margin可以實現水平居中。而對于設置了top/bottom,left/right的absolute定位元素,我們設置寬高再配合margin就可以達到水平垂直居中:

  1. .container { 
  2.   width: 300px; 
  3.   height: 300px; 
  4.   position: relative; 
  5.   border: 1px solid red; 
  6.  
  7. .content { 
  8.   position: absolute; 
  9.   left: 0; 
  10.   right: 0; 
  11.   top: 0; 
  12.   bottom: 0; 
  13.   width: 200px; 
  14.   height: 100px; 
  15.   margin: auto; 
  16.   border: 1px solid green; 

兼容性很好,IE8以上支持。

課程好禮申請領取
您的姓名
您的電話
意向課程
 

中公優就業

官方QQ

掃描上方二維碼或點擊一鍵加群,免費領取價值599元網課,加群暗號:599。 一鍵加群

>>本文地址:
注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

推薦閱讀

優就業:ujiuye

關注中公優就業官方微信

  • 關注微信回復關鍵詞“大禮包”,領80G學習資料
QQ交流群
領取免費網課
(加群備注“網站”)
IT培訓交流群 加入群聊 +
軟件測試 加入群聊 +
全鏈路UI/UE設計 加入群聊 +
Python+人工智能 加入群聊 +
互聯網營銷 加入群聊 +
Java開發 加入群聊 +
PHP開發 加入群聊 +
VR/AR游戲開發 加入群聊 +
大前端 加入群聊 +
大數據 加入群聊 +
Linux云計算 加入群聊 +
優就業官方微信
掃碼回復關鍵詞“大禮包”
領取80G學習資料

測一測
你適合學哪門IT技術?

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結果
 
課程資料、活動優惠 領取通道
 
 
久久国产精品偷_久久综合久久自在自线精品自_久久香蕉网国产免费