未知div宽度高度使div水平垂直居中(弹性盒子方法)

不使用js的情况下有三种方法:

1、css3弹性盒子flexbox

2、display:table-cell;

3、transform:translate();

在这介绍一下css3的弹性盒子内容,对该属性了解的可以直接下拉看红色分割线下的水平垂直居中的方法

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。


-----------------------------------以下为弹性容器的属性--------------------------------------------

可以设置的属性有:flex-direction,justify-content,align-items,flex-wrap,flex-flow,align-content

1.flex-direction指定弹性子元素在父容器中的位置: row左对齐(默认) \ row-reverse右对齐(从后往前排 最后一项在最上) \ column纵向排列 \ column-reverse反转纵向排列(从后往前排 最后一项在最上)

2.justify-content应用在弹性容器上,把弹性项沿着弹性容器的主轴线对齐(水平方向):flex-start左对齐 \ flex-end右对齐 \ center居中 \ space-between平均分布(首尾与弹性容器边框无空隙) \ space-around平均分布(首尾与弹性容器边框有空隙,距离为弹性项之间的距离的一半)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值