居中总结css

居中(在包含块中居中)

水平居中

1)行盒、行块盒水平居中

直接设置行盒父元素:text-align:center;

2)常规流 块盒 水平居中

定宽,左右设置margin为automargin:0 auto;

3)绝对定位或者固定定位元素水平居中

1、left:0; right:0; margin:0 auto;定宽
2、left:50%; transform:translateX(-50%);不定宽定宽都可以

4)flexBox盒子居中

给父盒子设置display:flex;justify-content:center;

垂直居中

1)单行文本垂直居中

设置行高等于整个区域高度

2)行块盒或者块盒多行文本的垂直居中

没有完美方案;
设置上下padding撑开,但是不能知道高度
或者父元素设置display:table-cell;vertical-align: middle;

3)绝对定位的垂直居中

1、top:0; bottom:0; margin:auto 0;定高
2、top:50%; transform:translateY(-50%);不定高定高都可以

4)flexBox盒子居中

给父盒子设置display:flexalign-items:center;
多行文本居中垂直display:flex; align-content:center;

水平垂直居中(结合起来)

1)设置父元素为相对定位,给子元素设置绝对定位,
top: 0; right: 0; bottom: 0; left: 0; margin: auto;

2)设置父元素为相对定位,给子元素设置绝对定位,需要知道宽高
left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

3)使用定位属性
设置父元素为相对定位,给子元素设置绝对定位,
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

4)使用flex布局实现设置父元素为flex定位,
justify-content: center; align-items: center;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值