css實現水平居中和垂直居中的常見方式

Joyven 發布于2019-08-01 15:45 / 2922人閱讀

摘要：我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。例子對于圖片垂直居中可以利用的實現例子整個居中讓為的居中實現代碼以下不支持。

我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。

水平居中：

行內元素：text-align:center；//這個比較簡單
塊狀元素：定寬的塊狀元素通過設置左右margin為auto實現，例如margin：10px auto；不定寬的塊狀元素：加入 table 標簽后按照定寬元素進行設置；設置 display: inline 后按照行內元素設置；設置position:relative left:50% 通過給父元素設置 float，然后給父元素設置position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

垂直居中：
例子1.
對于單行文本最簡單的垂直居中就是利用line-height，首先，定義整個div的高度，然后再設置line height 的值等于div高度，這樣就實現了單行文本的居中效果。
例子2.

對于圖片垂直居中可以利用css的vertical-align:middle實現:

   #parent {
   line-height :200px;
   }
   #parent img{
   vertical-align:middle;
   }

例子3.
整個div 居中

   
   Content here

讓id為child的div 居中實現代碼：

   #parent{display:table;}
   #child {
   display:table-cell;
   vertical-align:middle;
   }
   //display:table-cell;IE8以下不支持。
   IE8以下的瀏覽器可以使用
   #child{
   display:inline-block;
   }

例子4.針對div塊級元素，可以使用下面的方法實現垂直居中

   HTML:
   
   Content here
   
   
   css：
   #parent{
   position:relative;}
   #child {
   positon:absolute;
   top:50%;
   left:50%;
   height:30%;
   width:50%;
   margin:-15% 0 0 -25%;
   }

設置父級position為relative；子元素postion為absolute；同時設置子元素的top為50%，水平也想居中的話，就設置left為50%

云服務器 GPU云服務器水平垂直居中實現垂直居中 html的水平居中垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50089.html

css實現水平居中和垂直居中的常見方式

摘要：我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。例子對于圖片垂直居中可以利用的實現例子整個居中讓為的居中實現代碼以下不支持。我們在實際工作中常會遇到需要設置居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。水平居中：行內元素：text-align:...

hqman 2019-08-29 11:22 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時實現水平和垂直居中。博客原文地址：Claiyre的個人博客 https://claiyre.github.io/如需轉載，請在文章開頭注明原文地址不為繁華易匠心從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為...

hiyayiji 2019-08-29 12:29 評論0 收藏0
css--布局

摘要：布局方式布局的傳統解決方案，基于盒狀模型，依賴屬性屬性屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。關于布局，當然肯定還有更多的更好的方法。接觸前端開發也有半年了，每當需要將一個空白的紙，畫成一個頁面的時候，總會出現不知所措的幾秒鐘。除了因為對css中的各種屬性的不熟練之外，更難為人的是怎么簡練的將這些屬性排列組合起來。其實靜下心來，仔細想一想，無非就是整體-->局...

Nino 2019-08-30 12:43 評論0 收藏0