整合營銷服務商

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

          免費咨詢熱線:

          CSS 中幾種最常用的水平垂直居中的方法

          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資訊、技術干貨~

          篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果,這也是我們網頁在編碼制作中會經常用到的問題。

          1)單行文本的居中

          主要實現css代碼:

          水平居中:text-align:center;

          垂直居中:line-height:XXpx; /*line-height與元素的height的值一致*/

          我們先來看這樣一個例子,加入我們這里有一個div,寬度和高度為300px,背景顏色為黑色,然后在div中有一行簡短文字,我們只需要使用line-height:200px;就可以實現文字的居中效果,具體的代碼如下所示:

          由上圖可以看出我們實現了單行文字的垂直居中效果,但是很多時候我們的文字并不知道具體有多少,可能有一行,也可能有很多行,那么遇到多行文字的這種問題我們要如何處理呢。

          2)多行文本的垂直居中

          對于多行文本的垂直居中我們有很多種實現方式,我們這里逐個的來看一下;

          1、使用display:table來實現

          主要實現代碼:

          display: table使塊狀元素成為一個塊級表格;

          display: table-cell;子元素設置成表格單元格;

          vertical-align: middle;使表格內容居中顯示,即可實現垂直居中的效果;

          具體的html與css的代碼就如下所示:

          2、使用absolute與transform配合實現

          主要實現代碼:

          position:absolute; 首先給文本絕對定位;

          left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%,再用transform向左(上)平移它自己寬度(高度)的50%,也就達到居中效果了。

          具體的html與css的代碼就如下所示:

          3、使用flex實現

          主要實現代碼:

          display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器

          align-items: center;定義項目在交叉軸(縱軸)上如何對齊,垂直對齊居中

          justify-content: center; 定義了項目在主軸上的對齊方式,水平對齊居中

          具體的html與css的代碼就如下所示:

          好了,本篇文章就給大家說到這里,大家自己動手寫一下看能不能寫出一樣的頁面效果出來,也可以找一些類似的頁面自己練習一下,有需要源碼的可以直接私信【網站源碼】即可。

          每日金句:了解別人心里想什么,你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          平居中方案:

          水平居中設置

          1、行內元素

          設置 text-align:center

          2、定寬塊狀元素

          設置 左右 margin 值為 auto

          3、不定寬塊狀元素

          a:在元素外加入 table 標簽(完整的,包括 table、tbody、tr、td),該元素寫在 td 內,然后設置 margin 的值為 auto

          b:給該元素設置 displa:inine 方法

          c:父元素設置 position:relative 和 left:50%,子元素設置 position:relative 和 left:50%

          垂直居中設置

          1、父元素高度確定的單行文本

          設置 height = line-height

          2、父元素高度確定的多行文本

          a:插入 table (插入方法和水平居中一樣),然后設置 vertical-align:middle

          b:先設置 display:table-cell 再設置 vertical-align:middle

          在前端面試中,大都會問你div居中的方法:

          文筆不好,就隨便寥寥幾句話概括了,希望大家能夠輕拍

          不過以后文筆肯定會變得更好一些的。

          開始這些東西之前也可以測試一下你對html了解多少,讓我們測試一下吧,小測驗:你對HTML5了解有多少?

          今天我們就細數一下幾種方法:

          1,使用position:absolute,設置left、top、margin-left、margin-top的屬性

          .one{

          position:absolute;

          width:200px;

          height:200px;

          top:50%;

          left:50%;

          margin-top:-100px;

          margin-left:-100px;

          background:red;

          }

          這種方法基本瀏覽器都能夠兼容,不足之處就是需要固定寬高。

          2,使用position:fixed,同樣設置left、top、margin-left、margin-top的屬性

          .two{

          position:fixed;

          width:180px;

          height:180px;

          margin-top:-90px;

          margin-left:-90px;

          background:orange;

          }

          大家都知道的position:fixed,IE是不支持這個屬性的

          3,利用position:fixed屬性,margin:auto這個必須不要忘記了。

          .three{

          position:fixed;

          width:160px;

          height:160px;

          top:0;

          right:0;

          bottom:0;

          left:0;

          margin:auto;

          background:pink;

          }

          4,利用position:absolute屬性,設置top/bottom/right/left

          .four{

          position:absolute;

          width:140px;

          height:140px;

          background:black;

          }

          5,利用display:table-cell屬性使內容垂直居中

          .five{

          display:table-cell;

          vertical-align:middle;

          text-align:center;

          width:120px;

          height:120px;

          background:purple;

          }

          6,最簡單的一種使行內元素居中的方法,使用line-height屬性

          .six{

          width:100px;

          height:100px;

          line-height:100px;

          text-align:center;

          background:gray;

          }

          這種方法也很實用,比如使文字垂直居中對齊

          7,使用css3的display:-webkit-box屬性,再設置-webkit-box-pack:center/-webkit-box-align:center

          .seven{

          width:90px;

          height:90px;

          display:-webkit-box;

          -webkit-box-pack:center;

          -webkit-box-align:center;

          background:yellow;

          color:black;

          }

          8,使用css3的新屬性transform:translate(x,y)屬性

          .eight{

          position:absolute;

          width:80px;

          height:80px;

          transform:translate(-50%,-50%);

          -webkit-transform:translate(-50%,-50%);

          -moz-transform:translate(-50%,-50%);

          -ms-transform:translate(-50%,-50%);

          background:green;

          }

          這個方法可以不需要設定固定的寬高,在移動端用的會比較多,在移動端css3兼容的比較好

          9、最高大上的一種,使用:before元素

          .nine{

          position:fixed;

          display:block;

          background:rgba(0,0,0,.5);

          }

          .nine:before{

          content:'';

          display:inline-block;

          vertical-align:middle;

          height:100%;

          }

          .nine .content{

          width:60px;

          height:60px;

          line-height:60px;

          color:red;

          總而言之所有的居中的方法就是你必須要掌握css屬性的這個概念HTML DIV+CSS,你掌握了就可以好好的運用這些居中的東西了

          限時!!免費送Dreamweaver、js等前端教程

          ↓↓↓


          主站蜘蛛池模板: 久久久久人妻精品一区三寸| 台湾无码AV一区二区三区| 国产一区韩国女主播| 免费观看日本污污ww网站一区| 深夜福利一区二区| 一区二区在线播放视频| 日韩精品无码一区二区视频| 久久国产免费一区| 天海翼一区二区三区高清视频| 国产精品日韩欧美一区二区三区| 国产一区二区三区小说| 精品国产一区在线观看| 国产精品福利区一区二区三区四区 | 亚洲无圣光一区二区| 人妻少妇精品视频三区二区一区| 亚洲乱码国产一区网址| 性色A码一区二区三区天美传媒 | 无码aⅴ精品一区二区三区| 亚洲Av永久无码精品一区二区| 99久久精品国产高清一区二区| 久久精品午夜一区二区福利| 日本一区二区三区久久| 国产精品无码不卡一区二区三区| 青青青国产精品一区二区| 亚洲精品色播一区二区| 在线精品动漫一区二区无广告| 国产一区二区三区美女| 成人区精品一区二区不卡| 无码国产精品一区二区免费| 精品国产亚洲一区二区在线观看 | 一区二区免费电影| 好看的电影网站亚洲一区| 国产精品一区二区无线| 香蕉免费一区二区三区| 一区二区三区免费视频播放器| 国产福利一区二区| 久久精品亚洲一区二区三区浴池| 国产综合无码一区二区辣椒| 亚洲一区二区三区国产精华液| 国产成人精品日本亚洲专一区 | 色老头在线一区二区三区|