• <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    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 您更想做哪個方向的工作?

    獲取測試結果
     
    課程資料、活動優惠 領取通道
     
     
  • <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    线上棋牌平台