在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;

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