html+css实现div居中的8种方法

　　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

　　到此这篇关于html+css实现div居中的8种方法的文章就介绍到这了,更多相关html+css实现div居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！