1、绝对居中
给div设置样式，div默认显示位置为body的左上方。
width: 400px; height: 300px; background-color: orange; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 2、水平垂直居中
给其父元素添加display: flex;弹性布局。
内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。
display: flex; justify-content: center; align-items: center; display: flex; justify-content: center; /*align-items: center;*/ 如果注释掉justify-content属性，使用align-items: center;属性，则居中对齐弹性盒的各项
元素，默认是沿着副轴Y轴居中，（上文提到过：由于给元素开启弹性布局，故主轴应为X轴）。
display: flex; /*justify-content: center;*/ align-items: center; 3、（定位+变形）居中
给父元素添加 position: relative;相对定位。
给自身元素添加position: absolute;绝对定位。
top: 50%;使自身元素距离上方“父元素的50%高度”的高度。
left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。
transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%宽度和高度。
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/204137.html原文链接：https://javaforall.net
