網站導航

zblogPHP模板zbpkf
zblog免費模板zblogfree
zblog模板學習zblogxuexi
zblogPHP仿站zbpfang

怎么使用CSS讓圖片水平垂直都居中

CSS

錢艷冰2年前16瀏覽0評論

怎么使用CSS讓圖片水平垂直都居中？

了解 CSS 中屬性的值及其特性，透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。

居中布局

水平居中

子元素于父元素水平居中且其（子元素與父元素）寬度均可變。

inline-block + text-align

</div>

<style>

.child {

display: inline-block;

}

.parent {

text-align: center;

}

</style>

優點

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

table + margin

</div>

<style>

.child {

display: table;

margin: 0 auto;

}

</style>

NOTE: display: table 在表現上類似 block 元素，但是寬度為內容寬。

優點

無需設置父元素樣式（支持 IE 8 及其以上版本）

NOTE：兼容 IE 8 一下版本需要調整為 <table> 的結果

absolute + transform

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

</style>

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。

缺點

transform 為 CSS3 屬性，有兼容性問題

flex + justify-content

</div>

<style>

.parent {

display: flex;

justify-content: center;

}

/* 或者下面的方法，可以達到一樣的效果 */

.parent {

display: flex;

}

.child {

margin: 0 auto;

}

</style>

優點

只需設置父節點屬性，無需設置子元素

缺點

有兼容性問題

垂直居中

子元素于父元素垂直居中且其（子元素與父元素）高度均可變。

table-cell + vertical-align

</div>

<style>

.parent {

display: table-cell;

vertical-align: middle;

}

</style>

優點

兼容性好（支持 IE 8，以下版本需要調整頁面結構至 table）

absolute + transform

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

</style>

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。

缺點

transform 為 CSS3 屬性，有兼容性問題

flex + align-items

</div>

<style>

.parent {

display: flex;

align-items: center;

}

</style>

優點

只需設置父節點屬性，無需設置子元素

缺點

有兼容性問題

水平與垂直居中

子元素于父元素垂直及水平居中且其（子元素與父元素）高度寬度均可變。

inline-block + text-align + table-cell + vertical-align

</div>

<style>

.parent {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.child {

display: inline-block;

}

</style>

優點

兼容性好

absolute + transform

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

優點

絕對定位脫離文檔流，不會對后續元素的布局造成影響。

缺點

transform 為 CSS3 屬性，有兼容性問題

flex + justify-content + align-items

</div>

<style>

.parent {

display: flex;

justify-content: center;

align-items: center;

}

</style>

優點

只需設置父節點屬性，無需設置子元素

缺點

有兼容性問題

多列布局

多列布局在網頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列自適應還有等分布局等。

一列定寬，一列自適應

float + margin

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

margin-left: 100px

/*間距可再加入 margin-left */

}

</style>

NOTE：IE 6 中會有3像素的 BUG，解決方法可以在 .left 加入 margin-left:-3px。

float + margin + (fix) 改造版

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right-fix {

float: right;

width: 100%;

margin-left: -100px;

}

.right {

margin-left: 100px

/*間距可再加入 margin-left */

}

</style>

NOTE：此方法不會存在 IE 6 中3像素的 BUG，但 .left 不可選擇，需要設置 .left {position: relative} 來提高層級。此方法可以適用于多版本瀏覽器（包括 IE6）。缺點是多余的 HTML 文本結構。

float + overflow

</div>

<p>right</p>

</div>

<style>

.left {

float: left;

width: 100px;

}

.right {

overflow: hidden;

}

</style>

設置 overflow: hidden 會觸發 BFC 模式（Block Formatting Context）塊級格式化文本。 BFC 中的內容與外界的元素是隔離的。

優點

樣式簡單

缺點

不支持 IE 6

table

</div>

<p>right</p>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*寬度為剩余寬度*/

}

</style>

table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定布局優先。

NOTE：table-cell 中不可以設置 margin 但是可以通過 padding 來設置間距。

flex

</div>

<p>right</p>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等價于*/

/*flex: 1 1 0;*/

}

</style>

NOTE：flex-item 默認為內容寬度。

缺點

低版本瀏覽器兼容問題

性能問題，只適合小范圍布局。

兩列定寬，一列自適應

</div>

<p>center<p>

</div>

<p>right</p>

</div>

<style>

.left, .center {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

/*等價于*/

/*flex: 1 1 0;*/

}

</style>

多列定寬的實現可以更具單列定寬的例子進行修改與實現。

一列不定寬加一列自適應

不定寬的寬度為內容決定，下面為可以實現此效果的方法：

float + overflow，此方法在 IE6 中有兼容性問題

table，此方法在 IE6 中有兼容性問題

flex，此方法在 IE9及其以下版本中有兼容性問題

多列不定寬加一列自適應

其解決方案同一列不定寬加一列自適應相仿。

多列等分布局

每一列的寬度和間距均相等，下面為多列等分布局的布局特定。

父容器寬度為 C，C = W * N + G * N - G => C + G = (W + G) * N。

float

</div>

</div>

</div>

</div>

.parent {

margin-left: -20px;

}

.column {

float: left;

width: 25%;

padding-left: 20px;

box-sizing: border-box;

}

</style>

NOTE：此方法可以完美兼容 IE8 以上版本。 NOTE+：此方法結構和樣式具有耦合性。

table

</div>

</div>

</div>

</div>

.parent-fix {

margin-left: -20px;

}

.parent {

display: table;

width: 100%;

/*可以布局優先，也可以單元格寬度平分在沒有設置的情況下*/

table-layout: fixed;

}

.column {

display: table-cell;

padding-left: 20px;

}

</style>

NOTE：缺點是多了文本結果

flex

</div>

</div>

</div>

</div>

.parent {

display: flex;

}

.column {

/*等價于 flex: 1 1 0;*/

flex: 1;

}

.column+.column {

margin-left: 20px;

}

</style>

NOTE：flex 的特性為分配剩余空間。 NOTE+：兼容性有問題。

table

table 的特性為每列等寬，每行等高可以用于解決此需求。

</div>

<p>right</p>

</div>

<style>

.parent {

display: table;

width: 100%;

table-layout: fixed;

}

.left {

display: table-cell;

width: 100px;

}

.right {

display: table-cell;

/*寬度為剩余寬度*/

}

</style>

flex

</div>

<p>right</p>

</div>

<style>

.parent {

display: flex;

}

.left {

width: 100px;

margin-left: 20px;

}

.right {

flex: 1;

/*等價于*/

/*flex: 1 1 0;*/

}

</style>

NOTE：flex 默認的 align-items 的值為 stretch。

float

</div>

<p>right</p>

</div>

<style>

.parent {

overflow: hidden;

}

.left,

.right {

padding-bottom: 9999px;

margin-bottom: -9999px;

}

.left {

float: left;

width: 100px;

margin-right: 20px;

}

.right {

overflow: hidden;

}

</style>

NOTE：此方法為偽等高（只有背景顯示高度相等），左右真實的高度其實不相等。 NOTE+：此方法兼容性較好。

全屏布局

例如管理系統，監控與統計平臺均廣泛的使用全屏布局。

定寬需求

實現方案

Position 常規方案

Flex CSS3 新實現

Position

/*輔助結構用于滾動*/

</div>

</div>

<style>

html,

body,

.parent {

height: 100%;

/*用于隱藏滾動條*/

overflo: hidden;

}

.top {

/*相對于 body 定位*/

position: absolute;

top: 0;

left: 0;

right: 0;

height: 100px;

}

.left {

position: absolute;

left: 0;

top: 100px;

bottom: 50px;

width: 200px;

}

.right {

position: absolute;

left: 200px;

right: 0;

top: 100px;

bottom: 50px;

overflow: auto;

}

.right .inner {

/*此樣式為演示所有*/

min-height: 1000px;

}

.bottom {

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 50px;

}

</style>

Position 兼容

此方法不支持 IE6 可以使用下面的方法解決兼容問題。

<style>

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

}

html {

_height: auto;

_padding: 100px 0 50px;

}

.g-hd,

.g-sd,

.g-mn,

.g-ft {

position: absolute;

left: 0;

}

.g-hd,

.g-ft {

width: 100%;

}

.g-sd,

.g-mn {

top: 100px;

bottom: 50px;

_height: 100%;

overflow: auto;

}

.g-hd {

top: 0;

height: 100px;

}

.g-sd {

width: 300px;

}

.g-mn {

_position: relative;

left: 300px;

right: 0;

_top: 0;

_left: 0;

_margin-left: 300px;

}

.g-ft {

bottom: 0;

height: 50px;

}

</style>

Flex

</div>

</div>

html,

body,

parent {

height: 100%;

overflow: hidden;

}

.parent {

display: flex;

flex-direction: column;

}

.top {

height: 100px;

}

.bottom {

height: 50px;

}

.middle {

// 居中自適應

flex: 1;

display: flex;

/*flex-direction: row 為默認值*/

}

.left {

width: 200px;

}

.right {

flex: 1;

overflow: auto;

}

.right .inner {

min-height: 1000px;

}

</style>

Flex 兼容性

CSS3 中的新概念所有 IE9 及其也行版本都不兼容。

百分比寬度需求

只需把定寬高（px 為單位的值）的實現改成百分比（%）既可。

內容自適應

只有右側欄占據剩余位置，其余空間均需根據內容改變。所以 Postion 的定位方法不適合實現此方案。下面列出了兩種布局方案：

Flex

Grid，W3C 草案并不穩定，瀏覽器支持也并不理想

Flex

只有不為寬高做出限制，既可對其中的內容做出自適應的布局。

</div>

</div>

html,

body,

parent {

height: 100%;

overflow: hidden;

}

.parent {

display: flex;

flex-direction: column;

}

.middle {

// 居中自適應

flex: 1;

display: flex;

/*flex-direction: row 為默認值*/

}

.right {

flex: 1;

overflow: auto;

}

.right .inner {

min-height: 1000px;

}

</style>

方案比較

方案兼容性性能自適應Position好好部分自適應Flex較差差可自適應Grid差較好可自適應

來自于頭條，這個頭條很厲害整理的很多~

css的兼容,怎么使用CSS讓圖片水平垂直都居中

上一篇html怎么在字的前面加粗桿

下一篇在html文件中怎么插入圖像

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

怎么使用CSS讓圖片水平垂直都居中

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

怎么使用CSS讓圖片水平垂直都居中

相關文章