css實(shí)現(xiàn)水平居中和垂直居中的常見(jiàn)方式

hqman 發(fā)布于2019-08-29 11:22 / 588人閱讀

摘要：我們?cè)趯?shí)際工作中常會(huì)遇到需要設(shè)置居中的場(chǎng)景，居中分為水平居中和垂直居中。針對(duì)不同的情況又有不同的實(shí)現(xiàn)方式，例如行內(nèi)元素和塊狀元素。例子對(duì)于圖片垂直居中可以利用的實(shí)現(xiàn)例子整個(gè)居中讓為的居中實(shí)現(xiàn)代碼以下不支持。

我們?cè)趯?shí)際工作中常會(huì)遇到需要設(shè)置居中的場(chǎng)景，居中分為水平居中和垂直居中。針對(duì)不同的情況又有不同的實(shí)現(xiàn)方式，例如行內(nèi)元素和塊狀元素。

水平居中：

行內(nèi)元素：text-align:center；//這個(gè)比較簡(jiǎn)單
塊狀元素：定寬的塊狀元素通過(guò)設(shè)置左右margin為auto實(shí)現(xiàn)，例如margin：10px auto；不定寬的塊狀元素：加入 table 標(biāo)簽后按照定寬元素進(jìn)行設(shè)置；設(shè)置 display: inline 后按照行內(nèi)元素設(shè)置；設(shè)置position:relative left:50% 通過(guò)給父元素設(shè)置 float，然后給父元素設(shè)置position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來(lái)實(shí)現(xiàn)水平居中。

垂直居中：
例子1.
對(duì)于單行文本最簡(jiǎn)單的垂直居中就是利用line-height，首先，定義整個(gè)div的高度，然后再設(shè)置line height 的值等于div高度，這樣就實(shí)現(xiàn)了單行文本的居中效果。
例子2.

對(duì)于圖片垂直居中可以利用css的vertical-align:middle實(shí)現(xiàn):

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

例子3.
整個(gè)div 居中

   
   Content here

讓id為child的div 居中實(shí)現(xiàn)代碼：

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

例子4.針對(duì)div塊級(jí)元素，可以使用下面的方法實(shí)現(xiàn)垂直居中

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

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