div居中方法(共8种) | 您所在的位置:网站首页 › office页面怎么居中 › div居中方法(共8种) |
水平居中
1.行级元素:为该行级元素的父元素设置text-align:center配合line-height样式
行级元素
2.块级元素:为其自身设置margin:auto样式 块级元素 垂直居中 方法一:display:table;此元素会作为块级表格来显示(类似 ),表格前后带有换行符. display:table-cell;此元素会作为一个表格单元格显示(类似 和 ) 块级元素 方法二:利用flex布局使内部块级元素水平,垂直居中(display:flex;justify-content: center; align-items:center;) 块级元素 方法三:利用定位实现,父元素:position:relative; ,子元素:position: absolute;top:50%;left:50%;transform:translate(-50%,-50%); 块级元素 方法四:绝对定位, left:50%,top: 50% + margin-left:-(自身宽度的一半),margin-top:-(自身高度的一半) 缺点:要自己计算容器的宽高,万一容器的宽高改变还要修改css样式 块级元素 方法五:绝对定位,left: 0,right: 0, top: 0, bottom: 0 + margin:auto 块级元素 方法六:固定定位position:fixed;并设置一个较大的z-index层叠属性值 块级元素 方法七:要把元素相对于视口进行居中,那么相当于父元素的高度就是视口的高度,视口的高度可以用vh来获取: 块级元素 方法八:Flex加margin:auto 块级元素 |
CopyRight 2018-2019 实验室设备网 版权所有 |