水平居中
行级元素：为该行级元素的父元素设置text-align:center配合line-height样式
行级元素
块级元素：为其自身设置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: 0，right: 0, top: 0, bottom: 0 + margin：auto
块级元素
方法六：
固定定位position:fixed;并设置一个较大的z-index层叠属性值。
块级元素
方法七：
要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：
块级元素
方法八：
Flex加margin:auto
块级元素
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230001.html原文链接：https://javaforall.net
