让盒子实现水平和垂直居中（CSS3）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让盒子实现水平和垂直居中</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            /*   1.我们translate里面的参数是可以用 % */
            /*  2.如果里面的参数是 % 移动的距离是 盒子自身的宽度或高度来对比 */

            /*  这里的50% 就是50px 因为盒子的宽度是100px  */

            /*   transform: translate(50%); */
        }

        p {
            /*  1.让盒子水平和垂直居中 */
            /* 子绝父相 */
            position: absolute;
            top: 50%;
            left: 50%;
            /*   2.再用margin进行设置   (盒子的一半即可实现水平垂直居中)*/
            /*  margin-top: -100px; */
            /*  margin-left: -100px; */
            width: 200px;
            height: 200px;
            background-color: green;
            /* 3.也可以这样写 */
            transform: translate(-50%, -50%);
        }

        span {
            /*   transform对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }