该用户从未签到
|
## **方法一 **2 O- N4 C( R: W4 I
思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中
8 D) A' W1 d6 k- a) e/ j优点:父元素(parent)可以动态的改变高度(table元素的特性)
7 c# M% K9 Q+ a; E缺点:IE8以下不支持7 l8 y* }/ y. D4 A" ^: ]
+ ~: j' @5 T. D& C1 O" M, Z
```
% t* N, `3 B$ w<!DOCTYPE html>
: q2 H3 u. X- V5 o5 C( Q7 l<html lang="en">
) ]9 _5 m- t( _1 ^' ]<head>7 `) K! h% ~5 x/ G$ M" {" b
<meta charset="UTF-8">
+ ^( C" I2 d% z7 @* [) k <title>未知宽高元素水平垂直居中</title>' X8 u0 h: u! G
</head>
4 I3 _' | j M, \/ ?" O# q9 ^<style>
" b+ G' k$ q Y: u. o5 i1 l4 `
' ^5 H0 Q @& Q# b% x.parent1{- r, ~9 E1 ]7 x K7 c
display: table;- S# u+ b6 r! ~$ [- h. |# N
height:300px;( ?2 W' i: M( c7 u9 @: l6 \, d
width: 300px;
! l2 O" R2 Z0 w6 Z background-color: #FD0C70;$ G9 q% ~, e7 |+ e
}
; G. Q5 A8 P% F7 C4 _$ V7 g S.parent1 .child{
' P- l: |# J) P0 i, J display: table-cell;! e4 {2 R" M% m* y- `; s
vertical-align: middle;
* j. A/ m& g3 `" e+ x' } text-align: center;2 ], P1 k. Y5 |1 Y
color: #fff;3 Z( z) D* p2 @! \# I
font-size: 16px;
1 ^" B" E6 \& ]; }8 u}" ~% b% X0 [5 E O
# |! }8 j$ `* h+ _6 ?: d</style>: B+ A* T$ ^ U" ]2 Z o" F5 G0 s
<body>
% f, p) n2 N, y u7 ? o <div class="parent1">
- w& Y" v' r [4 V) I$ L' R2 h) L3 e <div class="child">hello world-1</div>
2 ?) ~' h `/ F$ a F) ~ </div>* W; o S1 M+ N3 Y0 ?. P9 F/ E
</body>
& D8 t+ o# M |9 J0 o</html>
3 `7 n8 `3 {" ^/ e& _! }```; A1 U: z! n$ |
## 方法二:
4 Q- g8 y1 M+ D) ~; t
% i. W9 I: v. _/ a8 V思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0. ^3 Z; |3 W Q& Q2 C1 {& [+ r, Y- R
缺点:多了一个没用的空标签,`display:inline-block` IE 6 7是不支持的(添加上:`_zoom1;*display:inline`)。
8 {* T7 h! q; ]% p1 B* H当然也可以使用伪元素来代替span标签,不过IE支持也不好,但这是后话了& E$ t$ Z/ B( K2 r
: }. B% N9 B# c. M
```6 R3 M+ u* D7 H2 j, f7 I
<!DOCTYPE html>
+ v) ^- q2 {; l. x# X<html lang="en">
8 j1 g' O- J7 {5 z<head>$ t7 e* G& T* A4 b/ D- m" o( b! s& n
<meta charset="UTF-8">
8 n( l/ U% w1 F <title>未知宽高元素水平垂直居中</title>2 _" f% k; F( w( i
</head>
4 z; F% A5 h1 v/ D" R<style>
! ~: C7 Y9 ?0 g& V: }" k/ O.parent2{
% }& B4 w6 V) A0 y1 B6 y height:300px;5 Q9 ]* E3 [; x
width: 300px;/ d% S: D3 p/ z, j1 B4 U% _
text-align: center; ^- j1 e! d7 f
background: #FD0C70;
( P& D1 A# a$ } N+ S( e P( M}
2 A8 n' V( L5 x6 r" ?5 l.parent2 span{
1 ^ t& P& f- [ display: inline-block;;
7 F- F5 H9 z2 l5 }& Z) u( J/ y$ V width: 0;5 L/ p; K$ z$ B; |& Y: F5 t
height: 100%;
' _! Q s. _9 C0 W$ O. r vertical-align: middle;! W8 P* q7 P+ G/ i Y
zoom: 1;/*BFC*/
- h6 d7 K- h$ y( Y$ i8 W *display: inline;8 G4 J7 B$ }6 S( H
}7 u5 z2 s6 q2 t+ b t
.parent2 .child{2 s2 \' C& ]. l
display: inline-block;
+ p9 }: |3 s3 |, n0 {0 [( c$ Z color: #fff;
( p! x, u: Y6 {2 @1 m, d! i zoom: 1;/*BFC*/2 l# ~3 W6 N" f& o( O4 S
*display: inline;2 L1 k7 h [5 W4 g I
}
7 k. v3 w0 P% @0 D+ N' f5 z+ h
* f& C( q: U a0 S% L. z</style>& ^8 |- ^- _5 l& r+ |
<body>. A) U# Y7 s3 N6 ?0 H" d
<div class="parent1">5 g% S# h6 p6 x' ^& v* c* A& ^
<div class="child">hello world-1</div>* J" F; E7 ]9 A" | G! C
</div>
9 }0 c( h, z1 J9 d. p% v6 x; d7 G C; _0 p( u
<div class="parent2">9 R6 T+ k4 d- H V9 s
<span></span>
. {! P9 B* Q( R! h+ Y( |5 n9 W <div class="child">hello world-2</div>6 N2 `( {- F& k9 j
</div>' ~! r; D5 R' j* Y( J
</body>+ J- R% M* U6 \0 g/ \
</html>
' `* i% \; P0 h p1 ?```8 V5 C6 Q2 h/ w
7 r1 X6 u% U. R/ C( @& T1 ^0 g
## 方法三1 _2 v4 X, t( A$ f$ }1 G& Y
7 d- y9 X* {5 {& O3 ^思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 `transform:translate(-50%; -50%)`
' S, `' G5 `6 a3 S, ?优点:高大上,可以在webkit内核的浏览器中使用3 A' ]& n" R" d4 z8 o* h
缺点:不支持IE9以下不支持transform属性* |: n. S, f6 W' q6 K+ O; J
( U1 d1 U1 g- ]2 j8 e```
8 ?) m8 G9 Y2 G: v<!DOCTYPE html> c3 `1 y7 s. a* U# ~1 w
<html lang="en">
4 u$ `& n& Z/ O( O* x& I+ Z8 e5 d<head>6 j" Q5 c0 W' ]- c+ ~
<meta charset="UTF-8">" p. q6 q! Q# }0 B, h% G9 N9 l0 A
<title>未知宽高元素水平垂直居中</title>( T$ P* i% w, K: u; K( n
</head>+ O3 ~% f% s( b" I
<style>3 H) S/ x6 D- w x% g# g1 B5 J; ]
.parent3{
6 }' ^% b6 M' t& h1 ]) E% d position: relative;
5 U4 a$ r' C0 J) s/ w height:300px;* q3 `) I+ ] V7 q9 @
width: 300px;4 r& f: D- Q1 w* W% @9 d6 l
background: #FD0C70;) V" S/ D& B- R2 q
}$ E) N! i. q) P6 I" F
.parent3 .child{3 C) V% c5 v# }0 X, w2 g
position: absolute;* ~9 W/ T7 {- r
top: 50%;. E6 T7 O& O6 F- T, L G6 ]+ n
left: 50%;3 d5 j4 U4 D6 ?2 J7 C
color: #fff;
1 x8 D. K8 G) V0 @ transform: translate(-50%, -50%);, a: J( B% r% n$ s
}
. O% e5 s" X6 W& u</style>: c$ L0 f W+ I, Q0 x
<body>
1 A8 Z& }. F+ T<div class="parent3">! R$ f1 z0 r+ S4 {
<div class="child">hello world-3</div>
+ T: i5 h( S/ z. B' J1 Z' s </div>
9 K A9 {, C& O b</body>! n& i3 S; w6 f A9 X4 q" Q+ E
</html>
3 _) {2 v: e9 I2 G; I```# k; y" K/ K6 q
% W, N Z( n7 y## 方法四:
' w$ p( @$ f/ z. D. ?2 F思路:使用css3 flex布局
1 c8 ]4 P$ i& ]) e# @( l% y/ l优点:简单 快捷
' u, i6 h d$ r4 P缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex
4 V, l# v; \/ A6 R! k! W
7 y2 O$ t2 T5 ^* B# |```
* ]8 s/ `+ O0 K; b$ q/ E0 s<!DOCTYPE html>0 z: W7 x$ d8 [' ]' ~
<html lang="en">* ?0 M* h7 B5 J( W: t
<head>
/ d' V/ o) c5 B3 O( h% H+ H3 Q" p <meta charset="UTF-8">8 ]3 z C: s; b% H! X( E, p h
<title>未知宽高元素水平垂直居中</title>/ s9 l5 r: E! K9 K& [3 F
</head>5 \7 q4 }5 I& I! ~2 @
<style>6 k% a4 O0 g, T4 r8 `& o
.parent4{
3 n- d7 q- A& |; {3 D: W display: flex;2 ]/ I/ Y; h1 q) h- @! k
justify-content: center;& ^. P* d4 v# k6 z9 ?, B
align-items: center;
% N3 V2 u+ g8 A# l width: 300px;6 J: G6 @ \% r8 S
height:300px;
1 B9 L5 e8 K6 l6 e9 @' L background: #FD0C70;' n& E/ `; T- @8 ]* X3 j3 I, y
}
7 A6 W, s' N4 \& l& _; E7 H. r.parent4 .child{
3 V: A$ f. R0 r color:#fff;; B8 o& q& L8 B1 K" O
}+ E2 ^) c9 ` d6 U v" R) {$ m
</style>9 b: Q0 S- G* B0 u- F5 m
<body>div> <div class="parent4">
% M K9 F# d% U! R <div class="child">hello world-4</div>
5 V M1 m& d" R- i* e) E </div>
6 I3 _ F. p |</body>
- @5 T& B8 s N" k0 `9 c) l! y</html>
! I$ c5 y! z9 y' i: |8 ~8 R```$ P% P7 b. [! y- Z' E9 f) C
|
|