京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3605|回复: 0

css实现元素垂直居中显示的7种方式

[复制链接]

18

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2020-9-22 00:50:13 | 显示全部楼层 |阅读模式 来自 中国
【一】知道居中元素的宽高
  P) ?  S/ w* [: B3 iabsolute + 负margin9 u- a& \3 p+ _, @
代码实现
  1. .wrapBox5{    width: 300px;    height: 300px;    border:1px solid red;    position: relative;}.wrapItem5{    width: 100px;    height: 50px;    position: absolute;    background:yellow;    top: 50%;    left:50%;    margin-top: -25px;    margin-left: -50px;}
复制代码
运行结果! E" d6 Y& h+ k
1 f9 b: c! H0 J0 i6 Z
absolute + margin auto
+ P4 q, K: Z  L& P代码实现
  1. .wrapBox{    width: 300px;    height: 300px;    background: yellow;    position: relative;}.wrapItem{    width: 100px;    height: 50px;    background:green;    display: inline-block;    position: absolute;    top: 0px;    bottom:0px;    left: 0px;    right: 0px;    margin:auto;}
复制代码
- r& V& t7 ?/ M5 x' u! u4 m2 d
absolute + calc& Z  c% G1 j, S4 Z: H6 \
代码实现
  1. .wrapBox6{    width: 300px;    height: 300px;    border:1px solid green;    position: relative;}.wrapItem6{    width: 100px;    height: 50px;    position: absolute;    background:yellow;    top: calc(50% - 25px);    left:calc(50% - 50px);}
复制代码
运行结果7 @- g5 [% S/ B

3 Y' k) M5 X- W+ ^) o三种对比总结( y7 {: V4 p2 _) j+ x0 q
当居中元素知道宽高的时候,设置居中的方式比较简单单一。三种方法的本质是一样的,都是对居中元素进行绝对定位,在定位到上50%,左50%后再拉回居中元素的一半宽高实现真正的居中。三种方式的区别就在于拉回元素本身宽高的方式不同。
2 q  Z8 [: w5 s& Z; |【二】居中元素的宽高未知- D$ B( L5 H; S4 _  D6 h  T. S/ }1 T" B
absolute + transform
: }* H! ]1 _: a: G代码实现
  1. .wrapBox{    width: 300px;    height: 300px;    background:#ddd;    position: relative;}.wrapItem{    width: 100px;    height: 50px;    background:green;    position: absolute;    top: 50%;    left:50%;    transform: translate(-50% , -50%);}
复制代码
运行结果  ]) |4 M. h; {6 u
7 r/ R, `; e' E3 W- R4 ?( c
原理
0 A, ?7 R# E: y* m5 u5 x/ P) D原理类似于已知宽高的实现方式,只不过当前居中元素宽高未知,所以需要自动获取当前居中元素的宽高。translate属性正好实现了该功能。* ?. O: z6 Z( v: h& I: Y  O
优缺点; O, L: z' R/ I/ G% J
优点:自动计算本身的宽高
' C& [! t2 E$ }缺点:如果同时使用transform的其他属性会产生相互影响。8 {# `6 W* D" k
所以:在不使用transform的其他属性时推荐使用该方式. a" A. q) a: Q3 A
flex布局
  1. .wrapBox2{    width: 300px;    height: 300px;    background: blue;    display: flex;    justify-content: center;    align-items: center;}/*注意:即使不设置子元素为行块元素也不会独占一层*/.wrapItem2{    width: 100px;    height: 50px;    background:green;}
复制代码
运行结果
5 h3 \  @' Y4 i7 P- b
2 _: u1 G( w( d, Q8 B
原理
3 j" H$ B3 l6 @: B- P将父级元素设置为流式布局,根据flex布局的属性特性,设置子元素居中。
- J1 K0 I  p) e5 }7 d9 B" ~优缺点4 w4 U0 _) e, t: f
优点:flex布局灵活,不需要对子元素进行任何的设置
9 @' O* {4 @$ A( |5 A9 `; x! S缺点:具有兼容性。子元素的float、clear、position等无法使用,如果同时具有其他布局,容易产生影响。9 T6 N! t) w" ]
table-cell布局
) ^7 |. d/ p1 t$ p" H8 G代码实现
  1. .wrapBox3{    width: 300px;    height: 300px;    background: yellow;    display: table-cell;    vertical-align: middle;    text-align: center;}.wrapItem3{    width: 100px;    height: 50px;    background:green;    display: inline-block;}
复制代码
运行结果
' b) V- _8 K- J1 F" \
# J% ]0 d2 Z1 j) y
原理
& [! S3 D. j0 C! B根据table的vertical-align属性,可以在表格元素内设置元素居中,再根据text-align设置水平居中
0 t9 S2 z: b( e7 ftable元素$ M/ S' a2 J& z. i% h! P
代码实现
  1. .tableBox{    border:2px solid yellow;    width: 300px;    height: 300px;}.tableBox table{    width:100%;    height:100%;}.centerWrap{    text-align: center;    vertical-align: middle;}.centerItem{    display: inline-block;    background:pink;}
复制代码
运行结果
8 p( K" }& U, g# D& Z1 ]
( Q1 I/ C- M  R, p
总结
% o# ~8 o( K  `4 e使用table标签进行布局,主要还是使用了vertical-align属性和text-align属性。但是相对于上一种方式,使用table标签会产生大量的冗余代码。不推荐使用5 D! e4 {" f5 C5 Z8 S- i6 f
到此这篇关于css实现元素垂直居中显示的7种方式的文章就介绍到这了,更多相关css 元素垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
4 W* s! X# B* G" x6 v- Z( l
$ P8 c1 V: Q- V, n* @  t7 \来源:http://www.jb51.net/css/743771.html; G) A  O$ R+ H# O" ^( ?2 e( H
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2026-5-16 03:19 , Processed in 0.037315 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表