整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

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


          一、使用 margin:auto

          當(dāng)元素有給定的高度以及寬度的時候,使用 margin: auto; 元素僅會水平居中,并不會進行垂直居中。此時就需要設(shè)置元素的 position 為 absolute,父級元素的 position 為 relative,同時元素的上下左右都需要設(shè)置為 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

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

          概念圖:

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

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

          CSS 代碼

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

          效果展示



          03

          PART

          三、使用彈性布局

          可以通過彈性布局來設(shè)置水平垂直居中,這里需要設(shè)置父級元素 display:flex; 還需要設(shè)置兩個屬性,水平布局 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;
          }

          效果展示:


          四、文本水平對齊和行高

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

          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

          五、使用網(wǎng)格布局

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

          相關(guān)代碼:

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

          效果展示:


          六、總結(jié)

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

          關(guān)注w3cschool編程獅訂閱更多IT資訊、技術(shù)干貨~

          在網(wǎng)頁中將 HTML 元素水平居中,可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實現(xiàn)方法:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>Horizontal Centering</title>

          <style>

          .center {

          width: 300px; /* 設(shè)置元素寬度 */

          margin: 0 auto; /* 水平居中 */

          background-color: lightblue;

          padding: 20px;

          }

          </style>

          </head>

          <body>

          <div class="center">

          <p>This element is horizontally centered.</p>

          </div>

          </body>

          </html>

          在上面的示例中, center 類的元素使用了 width: 300px; 來設(shè)置寬度,然后通過 margin: 0 auto; 來實現(xiàn)水平居中。這樣,無論屏幕寬度如何變化,元素都會始終水平居中顯示。

          您也可以將此樣式應(yīng)用到任何 HTML 元素(例如 div 、 span 、 p 等),以實現(xiàn)水平居中效果。

          內(nèi)容首發(fā)于工粽號:程序員大澈,每日分享一段優(yōu)質(zhì)代碼片段,歡迎關(guān)注和投稿!

          大家好,我是大澈!

          本文約 500+ 字,整篇閱讀約需 1 分鐘。

          今天分享一段優(yōu)質(zhì) CSS 代碼片段,可以輕松實現(xiàn)元素垂直水平居中對齊。

          老規(guī)矩,先閱讀代碼片段并思考,再看代碼解析再思考,最后評論區(qū)留下你的見解!

          div {
            display: grid;
            place-content: center;
          }


          分享原因

          這段代碼展示了如何使用 CSS Grid 布局以及 place-content 屬性來居中對齊元素。

          CSS Grid 是一種強大的布局工具,提供了簡單且靈活的方式來實現(xiàn)復(fù)雜的布局,而place-content 屬性進一步簡化了居中對齊的實現(xiàn)。

          相較于 Flex 布局,Grid 布局僅僅只需一行代碼即可搞定居中對齊!

          代碼解析

          1. display: grid;

          設(shè)置元素為網(wǎng)格容器。

          網(wǎng)格容器可以通過定義網(wǎng)格行和列來布置其子元素。

          2. place-content: center;

          place-content 是 align-content 和 justify-content 的組合屬性。

          center 值表示內(nèi)容在容器的中央對齊。

          3. 兼容性

          place-content: center; 的兼容性在現(xiàn)代瀏覽器中較好,某一些舊版瀏覽器的不兼容完全可以忽略了。

          以下是一些常見瀏覽器的具體支持情況:


          主站蜘蛛池模板: 亚洲国产精品自在线一区二区| 久久久国产精品一区二区18禁| 亚洲AV午夜福利精品一区二区| 99偷拍视频精品一区二区| 国产伦精品一区二区三区| 视频在线一区二区三区| 亚洲国产成人久久一区二区三区 | 国产伦精品一区二区三区视频猫咪| 色偷偷一区二区无码视频| 国产亚洲一区二区三区在线不卡| 久久久久人妻精品一区三寸| 亚洲AV无码一区二区三区人| 国产精品美女一区二区视频| 国产一区二区三区免费观看在线 | 色妞AV永久一区二区国产AV| 一区二区三区免费在线视频 | 精品视频无码一区二区三区| 精品福利一区二区三| 鲁丝片一区二区三区免费| 波多野结衣一区二区三区aV高清| 一区二区三区视频免费| 日本中文字幕在线视频一区| 免费国产在线精品一区| 丰满岳妇乱一区二区三区| 小泽玛丽无码视频一区| 一区二区三区免费视频网站| 精品无码人妻一区二区三区不卡 | 午夜一区二区免费视频| 亚洲.国产.欧美一区二区三区| 国产精品综合AV一区二区国产馆| 日韩精品一区二区三区老鸭窝| 国产一区二区久久久| 日韩欧美一区二区三区免费观看| 无码国产精品久久一区免费 | 国产怡春院无码一区二区| 狠狠做深爱婷婷久久综合一区| 日本高清无卡码一区二区久久| 亚洲AV成人精品日韩一区18p | 亚洲乱码一区二区三区国产精品 | 亚洲乱色熟女一区二区三区丝袜 | 欧洲亚洲综合一区二区三区|