注冊/登錄,歡迎光臨!
加入收藏設為首頁網站地圖
您當前的位置:辛勤IT網 >> 網頁設計 >> DIV+CSS >> 如何利用css如何居中div?
熱門:word | excel | powerpoint

如何利用css如何居中div?

2019/5/31 21:20:51 所屬分類:網頁設計 - DIV+CSS
內容提要:如何利用css如何居中div?1.水平居中,2.讓絕對定位的div居中,3.水平垂直居中一,4.水平垂直居中二,5.水平垂直居中三

  1.水平居中

  //給div設置一個寬度,然后添加margin:0 auto屬性

  div{
            width:200px;
            margin:0 auto;
  }  

  2.讓絕對定位的div居中

  div {
         position: absolute;
         width: 300px;
         height: 300px;
         margin: auto;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background-color: pink; /* 方便看效果 */
  }

  3.水平垂直居中一

  //確定容器的寬高 寬500 高 300 的層
  //設置層的外邊距

  div {
         position: relative;     /* 相對定位或絕對定位均可 */
         width:500px;
         height:300px;
         top: 50%;
         left: 50%;
         margin: -150px 0 0 -250px;      /* 外邊距為自身寬高的一半 */
         background-color: pink;     /* 方便看效果 */
  }

  4.水平垂直居中二

  // 未知容器的寬高,利用 `transform` 屬性

  div {
         position: absolute;     /* 相對定位或絕對定位均可 */
         width:500px;
         height:300px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: pink;     /* 方便看效果 */
  }

  5.水平垂直居中三

  //利用 flex 布局
  //實際使用時應考慮兼容性

  .container {
         display: flex;
         align-items: center;        /* 垂直居中 */
         justify-content: center;    /* 水平居中 */
 
  }
  .container div {
         width: 100px;
         height: 100px;
         background-color: pink;     /* 方便看效果 */
  } 

網頁設計 | DIV+CSS
最近更新
推薦信息
關于我們 | 聯系方式 | 對話本站 | 版權聲明 | 所有信息
福建体彩31选7走势图开奖7