CSS居中及布局

css中的居中可分為水平居中和垂直居中。水平居中分為行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分為定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。

使用inline-block和text-aligh實現

.parent .child

優點：相容性好；缺點：需要同時設定子元素和父元素

使用margin:0 auto 來實現

.child

缺點：需要指定寬度

使用table實現

.child

優點：只需要對自身進行設定；

使用絕對定位實現

.parent /*或者實用margin-left的負值為盒子寬度的一半也可以實現，不過這樣就必須知道盒子的寬度，但相容性好*/ .child

缺點：相容性差

使用flex布局實現

/*第一種方法*/ .parent /*第二種方法*/ .parent .child

缺點：相容性差，大面積布局可能會影響效率

在使用vertical-align的時候，由於對齊的基線是用行高的基線作為標記，故需要設定line-height或設定display:table-cell;

/*第一種方法*/ .parent /*第二種方法*/ .parent

vertical-align應用於行內元素和表單元素

使用絕對定位

.parent .child

使用flex實現

.parent

均需設定寬、高

利用vertical-align,text-align,inline-block實現

.parent .child

.parent

利用float+margin實現

.content .left .right

//需要注意的是，左列設定左浮動，右列不設定浮動，通過margin來實現與左列的距離。

利用float+margin(fix)實現

class="content">
class="left">
div>
class="rightbox">
class="right">
div>
div>
div>
//不理解為什麼新增乙個父級元素並設定她的width 100%，並設定乙個負margin會有用。
.content
.left
.rightbox
.right

使用float+overflow實現

.content .left

.right//這裡設定右邊自適應部分是overflow：hidden，預設的情況右邊自動填充餘下的部分，如果想讓左右兩邊有間隔的話，需要設定margin-left：300；需要加上左邊的部分和間隔的部分。

overflow:hidden，觸發bfc模式，浮動無法影響，隔離其他元素，ie6不支援，左側left設定margin-left當作left與right之間的邊距，右側利用overflow:hidden 進行形成bfc模式

如果我們需要將兩列設定為等高，可以用下述方法將「背景」設定為等高，其實並不是內容的等高

.content .left .right .left,.right

使用table實現

.content .left .left,.right

使用flex實現

.content .left .right

.content .left1,.left2 .right

方法與上面差不多

CSS 居中布局

居中在平時的運用很多，以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度，已知子元素寬度高度.con...

CSS居中布局

方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。常見的內聯元素有 span,a,img,input,label 等等 parent 此方法同樣適用於 display inline block ...

CSS居中布局

一水平居中方案 1 行內元素設定 text align center 2 定寬塊狀元素設定左右 margin 值為 auto 3 不定寬塊狀元素 a 在元素外加入 table 標籤完整的，包括 table tbody tr td 該元素寫在 td 內，然後設定 margin 的值為 aut...

CSS居中及布局

CSS 居中布局

CSS居中布局

CSS居中布局

相關推薦