怎么在CSS中設(shè)置元素垂直居中

這篇文章給大家介紹怎么在CSS中設(shè)置元素垂直居中，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)專注于巴彥淖爾企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城網(wǎng)站建設(shè)。巴彥淖爾網(wǎng)站建設(shè)公司,為巴彥淖爾等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.容器里面的內(nèi)容只有一行文字

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;/* 設(shè)置一個(gè)大的行高，讓它等于理想的容器高度。
      這樣會(huì)讓容器高度擴(kuò)展到能夠容納行高。如果內(nèi)容不是行內(nèi)元素，可以設(shè)置為inline-block。 */
    }
  </style>
  <body>
    <div>
      <span>測(cè)試</span>
    </div>
  </body>
</html>

2.容器自然高度

CSS中最簡(jiǎn)單的垂直居中方法是給容器相等的上下內(nèi)邊距，讓容器和內(nèi)容自行決定自己的高度。看下面的例子, 通過(guò)設(shè)置padding-top 和padding-bottom相等的值，讓內(nèi)容在父容器垂直居中。

<!DOCTYPE html>
<html>
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>測(cè)試</span>
      </div>
    </body>
</html>

3.使用 FlexBox

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>測(cè)試</span>
    </div>
  </body>
</html>

關(guān)于怎么在CSS中設(shè)置元素垂直居中就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

標(biāo)題名稱：怎么在CSS中設(shè)置元素垂直居中
網(wǎng)頁(yè)路徑：http://muchs.cn/article22/ijoicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、建站公司、網(wǎng)站制作

廣告

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

成都做網(wǎng)站