整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          使用CSS完成元素居中的七種方法

          ● ●

          在網頁上使 HTML 元素居中看似一件很簡單的事情. 至少在某些情況下是這樣的,但是復雜的布局往往使一些解決方案不能很好的發揮作用。

          在網頁布局中元素水平居中比元素垂直居中要簡單不少,同時實現水平居中和垂直居中往往是最難的。現在是響應式設計的時代,我們很難確切的知道元素的準確高度和寬度,所以一些方案不大適用。據我所知, 在CSS中至少有六種實現居中的方法。我將使用下面的HTML結構從簡單到復雜開始講解:

          <div class="center"> <img src="jimmy-choo-shoe.jpg" alt></div>

          鞋子圖片會改變,但是他們都會保持500pxX500px的大小。 HSL colors 用于使背景顏色保持一致。

          使用text-align水平居中

          有時顯而易見的方案是最佳的選擇:

          div.center { text-align: center; background: hsl(0, 100%, 97%);
          }
          div.center img { width: 33%; height: auto;}

          這種方案沒有使圖片垂直居中:你需要給<div>添加padding或者給內容添加margin-topmargin-bottom使容器與內容之間有一定的距離。

          使用 margin: auto 居中

          這種方式實現水平居中和上面使用text-align的方法有相同局限性。

          div.center { background: hsl(60, 100%, 97%);}

          div.center img { display: block; width: 33%; height: auto; margin: 0 auto;}

          注意: 必須使用display: block使margin: 0 autoimg元素生效。

          使用table-cell居中

          使用 display: table-cell, 而不是使用table標簽; 可以實現水平居中和垂直居中,但是這種方法需要添加額外的元素作為外部容器。

          <div class="center-aligned"> <div class="center-core"> <img src="jimmy-choo-shoe.jpg"> </div></div>

          CSS:

          .center-aligned { display: table; background: hsl(120, 100%, 97%); width: 100%;}.center-core { display: table-cell; text-align: center; vertical-align: middle;}
          .center-core img { width: 33%; height: auto;}

          注意:為了使div不折疊必須加上width: 100%,外部容器元素也需要加上一定高度使得內容垂直居中。給htmlbody設置高度后,也可以使元素在body垂直居中。此方法在IE8+瀏覽器上生效。

          使用absolute定位居中

          這種 方案 有非常好的跨瀏覽器支持。有一個缺點就是必須顯式聲明外部容器元素的height

          .absolute-aligned { position: relative; min-height: 500px; background: hsl(200, 100%, 97%);}.absolute-aligned img { width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

          Stephen在他的 博客 中演示了這種方案的幾種變化。

          使用translate居中

          Chris Coiyer 提出了一個使用 CSS transforms 的新方案。 同樣支持水平居中和垂直居中:

          .center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px;}.center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: auto;}

          但是有以下幾種缺點:

          • CSS transform 在部分就瀏覽器上需要使用 前綴。

          • 不支持 IE9 以下的瀏覽器。

          • 外部容器需要設置height(或者用其他方式設置),因為不能獲取 絕對定位 的內容的高度。

          • 如果內容包含文字,現在的瀏覽器合成技術會使文字模糊不清。

          使用Flexbox居中

          當新舊語法差異和瀏覽器前綴消失時,這種方法會成為主流的居中方案。

          .center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center;}.center img { width: 30%; height: auto;}

          在很多方面 flexbox 是一種簡單的方案, 但是它有新舊兩種語法以及早期版本的IE缺乏支持 (盡管可以使用 display: table-cell作為降級方案)。

          現在規范已經最終確定,現代瀏覽器也大都支持,我寫了一篇詳細的教程 教程。

          使用calc居中

          在某些情況下比flexbox更全面:

          .center { background: hsl(300, 100%, 97%); min-height: 600px; position: relative;}.center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

          很簡單,calc允許你基于當前的頁面布局計算尺寸。在上面的簡單計算中, 50% 是容器元素的中心點,但是如果只設置50%會使圖片的左上角對齊div的中心位置。 我們需要把圖片向左和向上各移動圖片寬高的一半。計算公式為:

          top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));

          在現在的瀏覽其中你會發現,這種方法更適用于當內容的寬高為固定尺寸:

          .center img { width: 500px; height: 500px; position: absolute; top: calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

          我在 這篇文章 中詳細講解了calc

          這種方案和flex一樣有許多相同的缺點: 雖然在現代瀏覽器中有良好的支持,但是在較早的版本中仍然需要瀏覽器前綴,并且不支持IE8。

          .center img { width: 40%; height: auto; position: absolute; top: calc(50% - 20%); left: calc(50% - 20%);}

          當然還有 其他更多的方案。理解這六種方案之后,web開發人員在面對元素居中的時候會有更多的選擇。

          關注“網頁設計自學平臺訂閱號回復以下|關鍵字|

          |dw教程|js教程|淘寶案例|軟件下載|搜狐案例|網站模板

          |ps教程|ai教程 |ui教程|騰訊案例| ae教程 |字體下載|

          |上課素材|前端特效|華潤萬家案例|最新dw案例|

          戳“閱讀原文”入群獲取最新高清前端視頻!

          自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取

          Html5-CSS之五大居中方式

          你是不是也對元素居中的知識點很是模糊?是不是苦于找不到一個總結的通俗易懂的說明?是不是自己懶得去總結?恭喜你,搜到這篇博客! 這是鄙人在前端的學習與實踐中總結出的元素的五大居中方式,黏貼了代碼并對代碼做了解釋,希望對迷茫的有所幫助!

          下面的居中示例中,統一使用了同一個div作為父元素和p作為子元素

          設置一個div,并且設置了div的寬高邊框,div里面設置一個塊元素p,設置了它的寬高和背景色

          css居中方式1

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>五大居中1</title>
          <style>
          *{margin:0;}
          div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
          text-align:center;font-size:0;
          }
          div p{width:100px;height:100px;background:#666;
          display:inline-block;vertical-align:middle;
          }
          div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
          </style>
          </head>
          <body>
          <div>
          	<p></p>
          </div>
          </body>
          </html>
          

          這里利用了偽元素讓子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一個偽元素,并使得樣式為inline-block;height:100%;就是和父元素一樣高,vertical-align:middle;垂直居中,也就是p元素相對與偽元素居中,由于偽元素和div一樣高,所以相當于p元素在div里垂直居中。

          css居中方式2

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>五大居中2</title>
          <style>
          *{margin:0;}
          div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
          p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
          </style>
          </head>
          <body>
          <div>
          	<p></p>
          </div>
          </body>
          </html>
          

          這里利用了定位居中

          子元素p設置position:absolute脫離文檔流,默認以html作為父元素,所以我們給父元素div設置position:relative;使得p以div為父元素做位置的變動,left:0;tight:0;top:0;bottom:0;(只有設置了定位的元素才可以使用這種方式來移動),最后margin:auto;就會水平和垂直都居中。

          css居中方式3

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>五大居中3</title>
          <style>
          *{margin:0;}
          div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
          p{width:100px;height:100px;background:#f99;}
          </style>
          </head>
          <body>
          <div>
          	<p></p>
          </div>
          </body>
          </html>
          

          這里利用了彈性盒居中

          父元素div設置成彈性盒樣式,justify-content:center;主軸居中

          align-items:center;垂直居中(而且這兩個只能設置在父元素上,彈性盒知識)

          css居中方式4

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>五大居中4</title>
          <style>
          *{margin:0;}
          div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
          p{width:100px;height:100px;background:#f99;position:absolute;
          left:50%;top:50%;margin:-50px 0 0 -50px;}
          </style>
          </head>
          <body>
          <div>
          	<p></p>
          </div>
          </body>
          </html>
          

          利用定位線左上角居中,然后左移子元素寬度的一半,再上移子元素高度的一半。

          css居中方式5

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>五大居中5</title>
          <style>
          *{margin:0;}
          div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
          p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
          	transform:translate(-50%,-50%);}
          </style>
          </head>
          <body>
          <div>
          	<p></p>
          </div>
          </body>
          </html>
          

          利用動畫移動屬性transform

          結語

          相信看了上面的有關Html5、css的元素五大居中方式,你們就可以解決自己的小問題了,但是也要養成一個總結的好習慣。好記性不如爛筆頭!以前留下來的話語總是有他的道理。Come on!

          原文鏈接:https://blog.csdn.net/qq_38110274/article/details/102756968

          SS 是前端里面的基礎之一,也是非常重要的一部分,它往往決定了你所做出來的網頁頁面是否美觀。在設計網頁頁面的過程中,總會有將元素或者文字進行水平垂直居中的要求。下面w3cschool編程獅就為大家介紹 CSS 中幾種常用到的水平垂直居中的方法。


          一、使用 margin:auto

          當元素有給定的高度以及寬度的時候,使用 margin: auto; 元素僅會水平居中,并不會進行垂直居中。此時就需要設置元素的 position 為 absolute,父級元素的 position 為 relative,同時元素的上下左右都需要設置為 0。

          HTML 代碼

          <div class="box">
            <div class="center1"></div>
          </div>

          CSS 代碼

          .box{
            width: 200px;
            height: 200px;
            background-color: #eee;
            position: relative;
            margin-top: 20px;
          }
          .center1{
            width: 50px;
            height: 50px;
            background-color: #00ACED;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }

          效果展示:



          二、使用 position:absolute

          當已經知道了要進行水平垂直居中的元素的寬高時,就可以通過設置 position: absolute 來實現。但是,使用的同時還需要結合其他屬性才完整實現。因為,單是設置 absolute,上左距離均為一半,就會出現下面這種情況。很顯然可以看到,元素并不是完全居中,僅只有左上角的位置在中心點

          概念圖:

          因此想要實現元素完全水平垂直居中,在設置了 absolute 定位后,可以設置 margin 值為負,或者使用 calc 來計算,上左距離在 50% 的基礎上還要減去元素本身一半的寬高。

          margin 值為負或者 calc 計算均是在已知元素寬高的情況下,假設不知道元素的寬高,那么怎么實現水平垂直居中呢?這里就可以使用 transform 屬性,通過坐標位移來實現居中。

          CSS 代碼

          /* 結合 margin */
          .center2{
            width: 50px;
            height: 50px;
            background-color: #7FFFD4;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
          }
          /* 結合 calc 計算*/
          .center2{
            width: 50px;
            height: 50px;
            background-color: #7FFFD4;
            position: absolute;
            left: calc(50% - 25px)
            top: calc(50% - 25px);
          }
          /* 結合 transform */
          .center2{
          width: 50px;
          height: 50px;
          background-color: #7FFFD4;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          }

          效果展示



          03

          PART

          三、使用彈性布局

          可以通過彈性布局來設置水平垂直居中,這里需要設置父級元素 display:flex; 還需要設置兩個屬性,水平布局 justify-content 以及垂直布局 align-items。

          HTML代碼

          <div class="box2">
            <div class="center4"></div>
          </div>

          CSS代碼:

          .box2{
            background-color: #eee;
            width: 200px;
            height: 200px;
            position: relative;
            margin-top: 20px ;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .center4{
            width: 50px;
            height: 50px;
            background-color: #B39873;
          }

          效果展示:


          四、文本水平對齊和行高

          前面介紹的是元素如何實現水平垂直居中,下面介紹的是如何將文字進行水平垂直居中。這第一個方法也是最經常用的,使用文本水平對齊 text-align 和行高 line-height 來實現的。

          HTML 代碼

          <div class="box3">
            <div class="center5">文字居中</div>
          </div>

          CSS 代碼

          .box3{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
          }
          .center5{
            text-align: center;
            line-height: 200px;
          }

          效果展示


          05

          PART

          五、使用網格布局

          第二個方法可以通過網格布局 grid 來實現。而這里通過 grid 有兩種方式實現,一種對元素本身屬性進行設置,另一種在元素的父級元素中設置。兩者看上去內容似乎差不多,不同的是在元素中設置的是 align-self 還要多了一個 margin,父級元素中是 align-items。

          相關代碼:

          /* grid 元素中設置 */
          .box4{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
            display: grid;
          }
          .center6{
            align-self: center;
            justify-content: center;
            margin: auto;
          }
          /* grid 父級元素中設置 */
          .box5{
            background-color: #eee;
            width: 200px;
            height: 200px;
            margin-top: 20px;
            display: grid;
            align-items: center;
            justify-content: center;
          }
          
          

          效果展示:


          六、總結

          以上就是關于 CSS 如何將元素或者文字進行水平垂直居中的幾種常用方法,大家還其他關于 CSS 實現水平垂直居中的方法嗎?請在評論區留下你的想法。

          關注w3cschool編程獅訂閱更多IT資訊、技術干貨~


          主站蜘蛛池模板: 精品少妇一区二区三区视频| 国产综合精品一区二区三区| 日韩一区二区三区视频久久| 91无码人妻精品一区二区三区L| 国产av福利一区二区三巨| 亚洲乱色熟女一区二区三区蜜臀 | 色综合视频一区二区三区| 麻豆一区二区99久久久久| 国产成人无码一区二区在线观看| 日韩经典精品无码一区| 成人区人妻精品一区二区三区| 亚洲av无码不卡一区二区三区| 国产一区二区视频在线播放| 一区二区免费在线观看| 精品视频午夜一区二区| 精品一区二区三区在线播放| 精品国产一区二区三区av片 | 国产一区二区三区不卡观| 国产精品第一区第27页| 人妻体内射精一区二区| 亚洲一区无码精品色| 大伊香蕉精品一区视频在线| 国产午夜三级一区二区三| 亚洲日韩精品一区二区三区无码| 国产成人无码一区二区在线观看| 国产一区二区视频在线观看| 久久人妻内射无码一区三区| 无码人妻一区二区三区免费看 | 高清一区二区在线观看| 美女福利视频一区二区| 亚洲AⅤ无码一区二区三区在线| 亚洲日韩国产一区二区三区| 丰满少妇内射一区| 日韩一区精品视频一区二区| 99精品国产高清一区二区麻豆 | 真实国产乱子伦精品一区二区三区 | 曰韩精品无码一区二区三区| 色欲AV蜜臀一区二区三区| 亚洲精品色播一区二区| 鲁大师成人一区二区三区| 日韩欧国产精品一区综合无码|