CSS實現垂直居中的方法

垂直居中是css布局中十分常見的布局效果，在平時的工作中遇到的垂直居中布局大概分為以下的幾類：

1，首先是單行文字居中，非常簡單，只需要設定父級元素的高和行高相等，或者設定本身元素為內聯塊或者塊元素，再設定高和行高相等就可以。

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style
>
7.sp1
12.sp2
18style
>
19head
>
20<
body
>
21<
div 
class
="sp1"
><
span
>我是單行文字，我需要垂直居中1
span
>
div>
22<
span 
class
="sp2"
>我是單行文字，我需要垂直居中2
span
>
23body
>
24html
>

2，第二種遇到比較多的就是多行文字和以及按鈕，類似這種。

小白遇到這種**處理就會無從下手，當初我對css一知半解，寫類似的布局會用很多比較2的方法，絕對定位，相對定位，margin,padding基本都會被我用到，總算是稀里糊塗給糊弄過去了，下來查了查資料，發現此布局的寫法簡單的令人髮指，在這裡分享給前段路上的小白們，一起學習進步，人不怕笨，但一定要勤奮。

2，**如下：

首先要給父元素設定寬高，然後設定display:table;意思是此元素會作為塊級**來顯示（類似 ），**前後帶有換行符。

然後在子元素設定display:table-cell;意思是此元素會作為乙個**單元格顯示（類似 和 ）;

有了這些屬性之後，給子元素設定垂直居中vertical-align:middle，大功告成。

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>
title
>
6<
style
>78
style
>
9head
>
10<
style
>11*
15.box1
23.box2
29.box2 .img
39.box3
43.btn
47input
55style
>
56<
body
>
57<
div 
class
="box1"
>
58<
div 
class
="box2"
>
59<
span 
class
="img"
>我是
span
>
60div
>
61<
div 
class
="box3"
>
62<
h1>商家入駐
h1>
63<
p>平台優勢，成單量更***，銷量與品牌雙重提公升
p>
64div
>
65<
div 
class
="btn"
>
66<
input 
type
="button"
value
="立即入住"
CSS垂直居中實現方法大全
摘要 在我們製作頁面的時候經常會遇到內容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優缺點，可以選擇自己喜歡的方式。以下 都經過本人親自測試。line height 複製 如下 vertical align middle before 複製 如下 程式設計客棧d vertical ...
CSS實現垂直居中的常用方法
這裡 在前端開發過程中，盒子居中是常常用到的。其中 居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設定元素的margin 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。首先，定義乙個需要垂直居中的div元素，他的寬度和高度均為3...
純css實現垂直居中的方法
垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化 在面試中也是經常問到的考點，現在我們一起來複習一下這些垂直居中的方法 parent child 我是內容 複製 此方...