盒子居中方法

盒子没有固定的宽和高

利用transform

在需要居中对齐的块中首先采用绝对定位,其父盒子采用相对定位。然后transform:translate(-50%,-50%);left:50%;top:50%

采用flex布局

父盒子采用flex布局。给父盒子加上display:flex;justify-content:center;align-items:center

盒子有固定的宽和高

经典做法

给需要居中的盒子加上left:50%;top:50%; margin-left:-自身宽度的一半;margin-top:-自身高度的一半

非常规的做法

将需要居中的盒子绝对定位,其父盒子采用相对定位。然后left:0;top:0;top:0;bottom:0;margin:auto;


  转载请注明: TomoFur 盒子居中方法

 上一篇
css中的百分比计算方法 css中的百分比计算方法
这一份笔记主要是来梳理一下css中涉及到的%计算。下面进入正题: css当中常用的属性百分比 属性 解析 width 基于父元素的width height 基于父元素的height margin(top,bottom,l
2019-06-06
下一篇 
长短连接/长短轮询 长短连接/长短轮询
短轮询定义:就是普通的轮询,指在特定的时间间隔,由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。短轮询是服务器立即发送响应,无论数据是否有效。 应用场景:传统的web通信,后台处理数据需要一定的时间,前端想要知
2019-06-05
  目录