使用CSS实现盒子水平垂直居中的方法(8种)CSS 水平居中并限定最大的宽度实现CSS实现子元素div水平垂直居中的示例CSS中的translate(-50%,-50%)实现水平垂直居中效果css3 flex实现div内容水平垂直居中的几种方法CSS3 不定高宽垂直水平居中的几种方式CSS3实现水平居中、垂直居中、水平垂直居中的实例代码手把手教你CSS水平、垂直居中的10种方式(小结)web前端之css水平居中代码解析

 body { background-color: #6ed0ff; } .father { background-color: #be33ec; border-radius: 20px; box-shadow: 0 0 15px rgb(0, 0, 0); margin: 100px auto; width: 300px; height: 300px; } .son { background-color: #fcff00; border-radius: 20px; box-shadow: 0 0 10px rgb(0, 0, 0); width: 100px; height: 100px; } 

 .father { display: grid; } .son { align-self: center; justify-self: center; } 

 .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } 

 .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

 .father { position: relative; } .son { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 

 .father { display: flex; justify-content: center; align-items: center; } 

 .father { overflow: hidden; } .son { margin: 50% auto; transform: translateY(-50%); } 

 .father { display: table-cell; text-align: center; vertical-align: middle; } .son { display: inline-block; } 

 .father { text-align: center; line-height: 300px; } .son { display: inline-block; vertical-align: middle; }