CSS垂直居中盤點

第一種方法:單行文字或者單個在div裡垂直居中，直接設定line-height與div高度相同

<

style
>
.container
style
>
head
>
<
body
>
<
div 
class
="container"
>
<
span
>肚子好餓！
span
>
div>

css中的確是有vertical-align屬性，但是它只對html元素中擁有valign特性的元素才生效，

例如**元素中的、、等，而像，這樣的 元素是沒有valign特性的，使用vertical-align對這些元素並不起作用。

可以使得div模擬table屬性。因此我們可以設定父級div的display屬性：display: table;；然後再新增乙個div包含文字內容，設定其display:table-cell;和vertical-align:middle;。

a,在div中垂直居中：

對父div設定：display:table-cell 和 vertical-align:middle;img 上也要加上vertical-align:middle的屬性。

b,多行文字在固定高度的父元素中，垂直居中

<

style
>
#outer
#middle
style
>
head
>
<
body
>
<
div 
id="outer"
>
<
div 
id="middle"
>
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中。
div>
div>
body
>

c,多行文字在不固定高度的父元素中，垂直居中

父級高度不固定的時，高度只能通過內部文本來撐開。
這樣，我們可以通過設定內填充（padding）的值來使文字看起來垂直居中，只需設定padding-top和padding-bottom的值相等。
第三種：利用position定位

方法5:也是看乙個大神的部落格，順便總結起來:這種居中辦法對block ,inline-block,inline元素都起作用

效果如下圖：

方法6,利用flex屬性來實現

<

style
>
*.box
.main
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
img 
src="a.png"
class
="main"
/>
div>
body
>

#main

補充乙個div,，表單,按鈕四個同時垂直居中的例子

<

style
>
*.container
.input-text
.btn
.div1
imgstyle
>
head
>
<
body
>
<
div 
class
="container"
>
<
div 
class
="div1"
>div
div>
<
input 
type
="text"
class
="input-text"
/>
<
button 
type
="button"
class
="btn"
>傳送
button
>
<
img 
src="a.png"
/>
div>

這個總結貌似更靠譜：

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...

css水平居中 垂直居中 水平垂直居中

css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...

css 垂直居中

先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...