【HTML/CSS】CSS實現垂直水平居中

CNZPH 發布于2019-08-02 14:31 / 789人閱讀

摘要：相信在工作中經常會遇到需要某某元素垂直水平居中的需求，下面總結一下實現方法元素已知寬度絕對定位反向偏移元素未知寬度絕對定位流體特性當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了。

相信在工作中經常會遇到需要某某元素垂直水平居中的需求，下面總結一下實現方法

元素已知寬度

絕對定位 + margin反向偏移

html

   
   
   
     
     
     Sumon Test

元素未知寬度

絕對定位 + margin auto + 流體特性

html

   
   
   
     
     
     Sumon Test

Tips

   當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了。
   具有流體特性絕對定位元素的margin:auto的填充規則和普通流體元素一模一樣：
   1.如果一側定值，一側auto，auto為剩余空間大小；
   2.如果兩側均是auto, 則平分剩余空間；

絕對定位 + transform反向偏移

html

   
   
   
     
     
     Sumon Test

flex布局

html

   
   
   
     
     
     Sumon Test

Tips

   1.justify-content 設置水平方向的元素位置
   2.align-items 設置垂直方向的元素位置

table-cell布局

html

   
   
   
     
     
     Sumon Test

Tips

  1.vertical-align 設置元素的垂直對齊方式
  2.text-align 設置元素中的文本的水平對齊方式

以上就是我對CSS實現垂直水平居中的總結，如有異議歡迎評論留言。

云服務器 GPU云服務器水平垂直居中實現垂直居中 html css HTML+CSS

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

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

【HTML/CSS】CSS實現垂直水平居中

摘要：相信在工作中經常會遇到需要某某元素垂直水平居中的需求，下面總結一下實現方法元素已知寬度絕對定位反向偏移元素未知寬度絕對定位流體特性當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了。相信在工作中經常會遇到需要某某元素垂直水平居中的需求，下面總結一下實現方法元素已知寬度絕對定位 + margin反向偏移 html ...

linkFly 2019-08-30 15:56 評論0 收藏0
【CSS】水平垂直居中的4種實現（寬高不定）

摘要：水平垂直居中的種方案寬高不定方案中我也給了寬高但并不是說寬高固定了。下面四種方案都是能夠實現當父元素或子元素的寬高發生改變時依舊維持水平垂直居中布局的方案。水平垂直居中的4種方案(寬高不定) 方案中我也給了寬高,但并不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之后,如果你父元素、子元素的寬高發生了改變,依舊可以保證是水平垂直居中的位置。下面四...

cppowboy 2019-08-29 14:21 評論0 收藏0
CSS水平或垂直居中技巧

摘要：適用情景單對象水平居中原理將子元素設置塊級表格，再設置水平居中。結語有些是水平居中，有些是垂直居中，將它們某兩個合在一起就能實現水平和垂直均居中。前言 css水平和垂直居中是一個亙古不變的話題，它常常出現在優美的網頁上以及各大前端面試當中。說來慚愧，在兩年前面試的時候，我完全不知道如何做到水平和垂直均居中的方法，那場面別提有多尷尬了（ps：特想找個地洞鉆進去）。。。時隔兩年，對于這個...

CastlePeaK 2019-08-30 11:22 評論0 收藏0
CSS那些事兒——居中布局

摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現今自己了解的居中布局方法作個小總結。水平居中行內元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現。前言居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現今自己了解的居...

JeOam 2019-08-29 13:05 評論0 收藏0