<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    web前端入門到實戰:html中div使用CSS實現水平/垂直居中的多種方式

    發布時間:2020-06-24 05:00:28 來源:網絡 閱讀:189 作者:前端向南 欄目:web開發

    CSS中的居中,在工作中,會經常遇到。它可以分為水平居中和垂直居中,以下是幾種實現居中的方式。

    以下例子中,涉及到的CSS屬性值。

    
    .parent-frame {
    
      width: 200px;
    
      height: 200px;
    
      border: 1px solid red;
    
    }
    
    .child-frame {
    
      width: 100px;
    
      height: 100px;
    
      border: 1px dotted blue;
    
    }
    

    1: text-align:center,水平居中

    塊狀元素,水平居中

    <div class="parent-frame">
    
      子元素水平居中
    
      <i >塊狀元素,水平居中</i>
    
    </div>
    

    子元素水平居中
    塊狀元素,水平居中

    2:margin: 0 auto,水平居中

    水平居中。上下外邊框距為0,左右外邊距瀏覽器會自動計算平分

    
    <div class="parent-frame">
      子元素水平居中
      <i class="child-frame" >塊狀元素,水平居中</i>
    </div>
    

    子元素水平居中
    塊狀元素,水平居中

    3:line-height值,垂直居中

    垂直居中。line-height屬性,設置行間的距離(行高)。不允許使用負值。
    單行文本的元素才適用,多行元素中不適用這種方法。元素內容是單行,并且其高度是固定不變的,

    
    <div class="parent-frame">
      <div >line-height值=父height值</div>
    </div>
    web前端開發學習Q-q-u-n: 784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (從零基礎開始到前端項目實戰教程,學習工具,職業規劃)

    line-height值=父height值

    4: 使用float屬性,配合relative定位,實現水平居中

    給父元素設置float,然后將父元素整體向右移動50%,再將子元素整體向左移動50%,來實現水平居中。

    記得將父元素清除浮動。

    
    <div class="parent-frame">
    
      <div  >
    
        <div >雖然寬度不同weiqinl</div>
    
      </div>
    
      <div >
    
        <div >但一樣</div>
    
      </div>
    
      <div >
    
        <div >水平居中了</div>
    
      </div>
    
      <div >
    
        <div >使用float屬性,記得清楚浮動</div>
    
      </div>
    
    </div>
    

    雖然寬度不同weiqinl 但一樣 水平居中了 使用float屬性,記得清楚浮動

    5:使用table布局,默認垂直居中

    table默認垂直居中vertical-align:middle。如果還想要水平居中,那就是行內元素,添加屬性text-align: center

    
    <table class="parent-frame">
    
      <tr>
    
        <td>
    
          table默認垂直居中[vertical-align: middle]
    
        </td>
    
        <td >
    
          水平居中添加text-align:center
    
        </td>
    
      </tr>
    
    </table>
    web前端開發學習Q-q-u-n: 784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (從零基礎開始到前端項目實戰教程,學習工具,職業規劃)

    web前端入門到實戰:html中div使用CSS實現水平/垂直居中的多種方式

    6: 仿table,display:table-cell。并使用vertical-align屬性,實現垂直居中

    該屬性設置元素的垂直對齊方式。

    定義行內元素的基線相對于該元素所在行的基線的垂直對齊。在表單元格中,這個屬性會設置單元格框中的單元格的對齊方式。

    
    <div class="parent-frame" >
    
      仿table: display:table-cell垂直居中vertical-align:middle
    
    </div>
    

    仿table: display:table-cell垂直居中vertical-align:middle

    7: 使用absolute絕對定位,配合margin使用,實現水平垂直居中

    相對應于relative的絕對定位absolute,需要定寬。同時,top/bottom應該相等,并且相加不超過定寬度。 right/left也應該相等,并且相加不超過定寬。

    再配合margin: auto使用

    
    <div class="parent-frame" >
    
      利用絕對定位,配合margin:auto自動計算外邊距。
    
      <div class="child-frame" >
    
        定寬元素,需要確定的尺寸。relative是為了給子元素定位用。
    
      </div>
    
    </div>
    

    利用絕對定位,配合margin:auto自動計算外邊距。 定寬元素,需要確定的尺寸。relative是為了給子元素定位用。

    8: 使用absolute絕對定位,配合margin的負值(negative margins)來實現水平垂直居中。

    negative margins負邊距,會使結構塌陷,利用這個特點來實現。

    
    <div class="parent-frame" >
    
      利用絕對定位,配合margin的負值來實現居中。
    
      <div class="child-frame" >
    
        負邊距來實現,水平垂直居中。需要知道該元素的具體大小
    
      </div>
    
    </div>
    

    利用絕對定位,配合margin的負值來實現居中。 負邊距來實現,水平垂直居中。需要知道該元素的具體大小

    9: 使用absolute絕對定位,配合translate 移動轉換,實現水平垂直居中

    使用百分比來絕對定位一個元素,并配合使用translate,將元素移動定位居中。

    <div class="parent-frame" >
    
      利用絕對定位,配合translate移動到水平垂直居中。
    
      <div class="child-frame" >
    
        不需知具體大小。支持IE9+及現代瀏覽器
    
      </div>
    
    </div>
    

    利用絕對定位,配合translate移動到水平垂直居中。 不需知具體大小。支持IE9+及現代瀏覽器

    10: 使用flex布局,設置其屬性justify-content,align-items都為center,實現水平垂直居中

    父元素使用flex布局,并定義兩個屬性值justify-content,align-items都為center,那么就定義為水平垂直居中

    justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。

    
    <div class="parent-frame" >
    
      <div class="child-frame">使用flex布局,justify-content屬性定義了項目在主軸上的對齊方式。</div>
    
      <div class="child-frame">
    
        align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中,則水平、垂直居中對齊
    
      </div>
    
    </div>
    web前端開發學習Q-q-u-n: 784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (從零基礎開始到前端項目實戰教程,學習工具,職業規劃)

    使用flex布局,justify-content屬性定義了項目在主軸上的對齊方式。 align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中,則水平、垂直居中對齊

    11: 利用flex布局,配合margin:auto使用,實現水平垂直居中。

    父元素使用flex布局,子元素使用margin: auto

    
    <div class="parent-frame" >
    
      <div >父元素使用flex布局,子元素配合margin:auto使用</div>
    
    </div>
    

    父元素使用flex布局,子元素配合margin:auto使用

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2