day07 css布局解決方案之居中布局

2022-05-06 23:18:11 字數 2290 閱讀 2384

轉行學開發，**100天——2018-03-23

1.水平居中

先將子框由塊級元素改為行內塊元素，再通過設定行內塊元素居中以實現水平居中

即對子框元素：display：inline-block;對父框元素設定：text-align:center;

相容性好，能適應ie6,ie7

先將子框設定為塊級**顯示，即display:table; 再設定子框居中margin:0 auto;

.child
只設定了子框元素，支援ie8以上；ie6，ie7瀏覽器中可利用table標籤

<


table 


class


="parent"


>


<


td class


="child"


>


demo


td>


table


>
將子框設定為絕對位置，移動子框，使子框左側距離相對框左側邊框距離為相對邊框寬度的一半，再通過向左移動子框的一半寬度以達到水平居中。設定父框為相對定位。

父框：position:relative

子框： position:absolute left:50%;transform:translatex(-50%);

.parent


.child
居中元素不會對其他元素產生影響，但是transform屬於css3,相容性有一定的影響。

將子框轉換為flex item，再設定子框居中。

即父框： display:flex;

子框：margin：0 auto;

.parent


.child
缺點是不支援低版本

將父框設定為display:flex;justify-content:cneter;

.parent
只需設定父框即可，但不支援ie6,ie7低版本。

2.垂直居中

即將父框轉化為乙個**單元格顯示，類似於/,再通過設定單元格內容垂直居中以實現垂直居中。

即父框：display:table-cell;

子框：vertical-align:middle;

.parent
類似於水平居中原理，即先將父框設定為position:relative;再將子框設定為position:absolute;top:50%;transform:translatey(-50%);

將父框定位設定為display:flex;設定內容居中，text-align:center;

3.水平垂直居中

設定父框：position:relative;

子框：position:absolute; left:50%;top50%;transform:translate(-50%,-50%);

.parent


.child
父框：display:table-cell;text-align:center;vertical-align:middle;

子框：display:inline-block;

由於該設定方法將內容**化，其實並不是真正全域性的水平垂直居中。

.parent


.child
設定父框：

display: flex;


justify-content: center;


align-items: center;


對於全域性頁面而言是水平垂直居中


.parent
以上是設定居中布局常用的方法，可選擇使用。

CSS之常見布局解決方案

css布局是每個前端開發工程師的基本功。下面我列出一些常見布局及解決方案。不完整，我只寫出重要 簡單的寫一下html結構 class parent class child 水平居中布局div div margin 定寬.childtable margin.childinline block text...

css布局解決方案

總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...

CSS布局解決方案

使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...