CSS如何實(shí)現(xiàn)水平與垂直居中

今天小編給大家分享一下CSS如何實(shí)現(xiàn)水平與垂直居中的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

成都創(chuàng)新互聯(lián)公司企業(yè)建站,10年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專(zhuān)注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶(hù)打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢(xún)和貼心的售后服務(wù)。對(duì)于做網(wǎng)站、成都做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶(hù)行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶(hù)行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶(hù)提供的解決方案。

首先我先創(chuàng)建一個(gè)公共的模板樣式

<template>
  <div class="two">
    <div class="parent">
      <div class="child">123</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.parent{
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  .child {
    height: 100px;
    width: 100px;
    background: #2f8df0;
  }
}
</style>

然后具體用到的樣式單獨(dú)寫(xiě)在方法里面，首先先介紹4個(gè)平時(shí)布局的技巧。

1.水平居中div里面的div，設(shè)置子元素的寬度。

.parent{
 width:300px;
    margin:0 auto;
}

注意：如果子元素設(shè)置了display:table-cell，那么margin:0 auto;將會(huì)失效。

2.設(shè)置文字垂直居中，設(shè)置包含文字div的高。

.child{
    text-align：center
    line-height:100px //知道子元素的高,設(shè)置和高一樣的高度
}

3.兩個(gè)或者多個(gè)塊級(jí)元素垂直居中對(duì)齊，父元素設(shè)置height和line-height相等。

 .parent{
     line-height: 300px; //知道父元素的高,設(shè)置和高一樣的高度
  }
   .child1{
    display: inline-block;
    vertical-align: middle;
    line-height: initial;  //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
   }
   .child2{
    display: inline-block;
    vertical-align: middle;
    line-height: initial;  //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
   }

4.讓一個(gè)元素充滿(mǎn)當(dāng)前整個(gè)容器，設(shè)置absolute

.parent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

OK，介紹完畢，下面開(kāi)始介紹CSS實(shí)現(xiàn)水平垂直居中的方式。

1.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用 absolute + transform （推薦）

.parent{
   position: relative 
}
.child{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

// 備注一下，如果只需要上下居中那就只要保留top,只要左右居中的話(huà)就保留left，translate設(shè)置
   translateY(-50%)或者translateX(-50%)

2.不需要設(shè)置子元素的寬高，不需要設(shè)置父元素的寬高。 使用flex布局（建議移動(dòng)端直接使用flex
pc端看需要兼容的情況。）

.parent{
  display:flex;
  align-items:center;
  justify-content:center;
}
.child{
 
}

3.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用 lineheight。
注意：這種方法需要通過(guò)text-align在子元素中將文字顯示重置為想要的效果

.parent{
    line-height: 300px;  //設(shè)置和父元素的高度一樣
    text-align: center;
}
.child{
    display: inline-block;
    vertical-align: middle;
    line-height: initial; //initial 關(guān)鍵字用于設(shè)置 CSS 屬性為它的默認(rèn)值。
    text-align: left;  //將文字顯示重置為想要的效果
}

4.不需要設(shè)置子元素的寬高，需要設(shè)置父元素的高度。使用css-table (使用之后此元素的margin:0 auto會(huì)失效)

.parent{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child{
  display: inline-block;
}

5.設(shè)置子元素的寬高，設(shè)置父元素的高度。 使用absolute + 負(fù)margin

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; //知道子元素的寬高
    margin-top: -50px;  //知道子元素的寬高
}

6.設(shè)置子元素的寬高，設(shè)置父元素的高度。使用 absolute + margin auto

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

7.設(shè)置子元素的寬高，設(shè)置父元素的高度。 使用 absolute + calc(這種方法兼容性依賴(lài)calc的兼容性)

.parent{
   position: relative 
}
.child{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

8.使用writing-mode（使用起來(lái)比較復(fù)雜，不推薦）

 //公共的樣式在最上面
 <div class="parent">
      <div class="box-child">
        <div class="child">123</div>
      </div>
    </div>

.parent{
     writing-mode: vertical-lr; //改變文字顯示的方向
    text-align: center;
}
.box-child{
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.child{
    text-align: left; //將文字顯示重置為想要的效果
    margin: 0 auto;
}

9.不需要設(shè)置子元素的寬高，不需要設(shè)置父元素的寬高。 使用grid布局（不建議使用，目前兼容性不是很好）

.parent{
    display: grid;
}
.child{
     align-self: center;
     justify-self: center;
}

10.使用table布局（純粹湊方法，這年頭，誰(shuí)還用table布局呀，哈哈哈哈）

<table>
    <tbody>
        <tr>
            <td class="parent">
                <div class="child">123</div>
            </td>
        </tr>
    </tbody>
</table>

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

以上就是“CSS如何實(shí)現(xiàn)水平與垂直居中”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱(chēng)欄目：CSS如何實(shí)現(xiàn)水平與垂直居中
標(biāo)題URL：http://muchs.cn/article46/ghsphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)