使元素相對於窗口或父元素水平垂直居中的幾種方法

本文轉載自查看原文 2017-07-22 19:19 1201

如果一個元素具有固定或相對大小，要使其不管如何調整窗口大小或滾動頁面，始終位於瀏覽器窗口中間，可使用如下方法：
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><meta charset="utf-8" />
<style>
   .window-center {
     /* 將position設置為fixed，使元素相對於瀏覽器窗口定位 */
   position: fixed;
      /* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */
   margin: auto;
     /* 將上下左右邊距（相對於瀏覽器窗口邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等
   可以設置任何其他相等的值，但如果窗口小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   }

   div {
   /* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應窗口大小和四個邊距值 */
   width: 30%;
   height: 100px;

   }
   </style>
</head>
<body> <div class="window-center"></div>
</body></html> 效果如圖：

那如何讓一個元素相對於其父元素水平垂直居中呢？
首先，要把元素的position屬性值改為absolute，使其有可能相對於父元素定位，而不是相對於瀏覽器窗口定位。absolute指定元素相對於position值不為static的第一個祖先元素定位（如果找不到這樣的祖先元素，就相對於body），而static是元素position屬性的默認值，
所以我們還要在父元素上做手腳。除了默認值static，position屬性主要的值還有absolute、fixed和relative。由於大多數時候，我們不想為了子元素的居中而改變父元素的位置或定位方式，所以排除absolute和fixed（當然這兩個值並不影響子元素的居中）。只剩下relative了，它指定元素相對於static定位方式確定的位置定位（使用left、right、top和bottom屬性）。如果將父元素的position屬性設為relative，但不改變定位屬性（left、top等），那么就達到了既讓子元素相對於其定位，又不改變其默認布局方式的效果。舉例如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" />
<style>
   .parent-center {
   /* 將position設置為absolute，使元素有可能相對於瀏覽器窗口定位 */
   position: absolute;
   /* 將margin設置為auto，使瀏覽器自動推算元素外邊距 */
   margin: auto;
   /* 將上下左右邊距（相對於父元素邊緣）全設為0，使瀏覽器推算出的外邊距上下、左右對應相等
   可以設置任何其他相等的值，但如果父元素小到不能容下任意一個方向的兩側邊距，元素也將不居中，所以推薦設為0 */
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   }

   div.parent {
   position: relative;
      /* 父元素可以有絕對或相對大小，也可以僅由其內容決定其大小 */
   width: 50%;
   height: 200px;

   }

   div.child {
   /* 使用這種方法的元素必須有絕對或相對大小，否則瀏覽器推算出的margin將為0，元素將被拉伸，以適應父元素大小和四個邊距值 */
   width: 30%;
   height: 100px;
   background-color: antiquewhite;
   }

   /* 這是一個用於演示父元素的默認定位未被影響，並且子元素確實是相對於父元素居中的干擾元素 */
   #commonDiv {
   width: 100px;
   height: 100px;
   background-color: cadetblue;
   }
   </style>
</head>
<body>
   <div id="commonDiv"></div>
   <div class="parent">
   <div class="parent-center child"></div>
   </div>
</body></html> 效果如圖：

此外，還可以通過為父元素啟用彈性盒布局解決子元素水平垂直居中的問題：

<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><meta charset="utf-8" />
<style>
   div.parent {
   /* 啟用彈性盒布局 */
   display: flex;
     /* 使子元素水平居中 */
   justify-content: center;
     /* 使子元素垂直居中 */
   align-items: center;
   width: 50%;
   height: 200px;

   }

   div.child {
   width: 30%;
   height: 100px;
   background-color: antiquewhite;
   }
   </style>
</head><body> <div class="parent"> <div class="child"></div> </div></body></html> 效果如圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS子元素在父元素中水平垂直居中的幾種方法讓div盒子相對父盒子垂直居中的幾種方法 CSS讓一個div相對於body水平垂直居中讓DIV水平和垂直居中的幾種方法實現水平垂直居中的幾種方法將圖片水平、垂直居中的幾種方法實現元素水平垂直居中的四種方法 css如何讓子元素在父元素中水平垂直居中讓塊元素在div中水平居中，並且垂直居中的五種方法垂直居中的幾種方法