CSS advance

animation: float 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate;

/* offset-x | offset-y | blur-radius | spread-radius | color */

/* center align */
/* for  div use 'margin: auto;' */
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

/* center text inside */
text-align: center;

/* center img: make it block */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* align left / right */


/* center vertically */


/* transform */
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* using flex */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0 ,maximum-scale=1.0,minimum-scale=1.0">

<!-- viewport:说明是视口标签。
width=device-width：宽度是设备宽度。
user-scalable=no：用户不能缩放 -->

body {
    background-color: black;
}
@media screen and (min-width: 480px) { /* 大于等于480 的情况*/
  body {
    background-color: lightgreen;
  }
@media screen and (min-width: 992px) { /* 大于等于992 的情况*/
  body {
    background-color: pink;
  }
}