CSS实现水平垂直居中总结

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

1 利用position:absolute水平/垂直居中

// 上下
position: absolute
top: 0;
bottom:0;
margin: auto;

// 左右
position: absolute
left: 0;
right:0;
margin: auto;

// 上下左右居中
position: absolute
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

2 利用行内元素水平垂直居中

// 水平
text-align: center;

// 垂直
height: 38px
line-height: 38px
// line-height = height

3 块级元素水平居中
image.png

4 块元素垂直居中
image.png

5 利用vertical-align实现inline-block元素垂直居中
1)单行元素

line-height = height // parent
vertical-align:middle // self

vertical-align只能应用在行内元素和单元格元素

长度和百分比是基于基线进行上(正值)下(负值)移动

2)多行元素垂直居中
image.png

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看