前端版心居中和通过圆角属性设计圆形和胶囊

居中

我们知道，盒子模型有一层外边距（margin），所以我们可以通过设置margin来控制盒子在整个页面中的位置，把margin设置为 50px auto。第一个50px设置的是上下外边距，体现为白色区域顶端距离页面顶端的距离为50px，第二个auto设置的是左右外边距，原理是浏览器会将一行的宽度减去盒子的宽度，再将剩余的宽度均摊给左右两边，使盒子左右外边距相等，达到居中的效果

实现代码：

div {
            width: 270px;
            height: 253px;
            background-color: #fff;
            margin: 50px auto;
            box-sizing: border-box;
            text-align: center;
        }

圆形

我们可以通过设置width和height来设置div标签的长宽，如果我们想设计出一个圆形，就要先保证width和height相同，再设置border-radius属性，使原来的棱角变得有弧度，我们只需要把border-radius设置为width的一半，就可以实现上图

实现代码：

img {
  width: 200px;
  height: 200px;
  
  border-radius: 100px;/*法一*/
  border-radius: 50%;/*法二*/
}

胶囊

与圆形同理，只需让width和height不一致，让标签变成一个长方形即可

实现代码：

div {
  width: 200px;
  height: 80px;
  background-color: orange;
  border-radius: 40px;
}