HTML的水平居中和垂直居中解决方案

水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{ ???width:200px; ???margin:0 auto; ?}

让绝对定位的div居中

div { ???position: absolute; ???width: 300px; ???height: 300px; ???margin: auto; ???top: 0; ???left: 0; ???bottom: 0; ???right: 0; ???background-color: pink; /* 方便看效果 */ }

水平垂直居中一确定容器的宽高 宽500 高 300 的层,设置层的外边距

 div { ???position: relative; ????/* 相对定位或绝对定位均可 */ ???width:500px; ???height:300px; ???top: 50%; ???left: 50%; ???margin: -150px 0 0 -250px; ?????/* 外边距为自身宽高的一半 */ ???background-color: pink; ????/* 方便看效果 */ ?}

水平垂直居中二 未知容器的宽高，利用 transform 属性

div { ???position: absolute; ????/* 相对定位或绝对定位均可 */ ???width:500px; ???height:300px; ???top: 50%; ???left: 50%; ???transform: translate(-50%, -50%); ???background-color: pink; ????/* 方便看效果 */ }

水平垂直居中三利用 flex 布局,实际使用时应考虑兼容性

 .container { ???display: flex; ???align-items: center; ???????/* 垂直居中 */ ???justify-content: center; ???/* 水平居中 */ } .container div { ???width: 100px; ???height: 100px; ???background-color: pink; ????/* 方便看效果 */ } ?