在CSS2.1中,想要实现块元素的水平居中和垂直居中是比较麻烦的事情。现在有了CSS3的弹性盒子模型,我们就可以轻松地实现了。其中,我们可以使用“justify-content;center;”来实现水平居中,也可以使用“align-items:center;”来实现垂直居中。

实现代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #father { display: flex; justify-content: center; align-items: center; width: 200px; height: 160px; border: 1px solid silver; } #son { width:100px; height:50px; background-color:hotpink; } </style> </head> <body> <div id="father"> <div id="son"></div> </div> </body> </html>

浏览器预览效果如图:

分析:

实现块元素在其父元素的水平居中和垂直居中很简单,只需要在其父元素添加以下代码即可:

display: flex; justify-content: center; align-items: center;

这种方式在实际开发中非常有用,小伙伴们要重点掌握喔。