一、水平居中：

前提： 父元素必须是块级元素，父元素宽度必须已经设定好

场景1；子元素是块级元素并且宽度没有设定（无需考虑）
场景2：子元素是行内元素（子元素的宽度是由内容撑开的）
    解决： text-align: center
场景3：子元素是块级元素并且宽度已经设定
    方案一：给子元素添加： margin: 0 auto;
    方案二：通过子元素相对父元素绝对定位
        1.父相子绝
        2.子：left: 50%;margin-left: -子宽-半(知道子元素宽度) 或 transform: translateX(-50%)(不知道子元素宽度) ；
    方案三：父： 弹性布局
        display: flex; flex-direction:row; justify-content: center;

二、垂直居中

前提： 父元素是盒子元素
场景1: 子元素是行内元素且为单行：设置父元素line-heigh为高度
    子元素是行内元素且为多行：设置父元素display: inline/inline-block/table-cell; vertical-align: middle；
场景2:  子元素是块级元素且子元素高度没有设定
    方案一：设置父元素display: inline/inline-block/table-cell; vertical-align: middle；
    方案二： 父元素 {display: flex; flex-direction:column; justify-content: center;}
场景3: 元素是块级元素且子元素高度已经设定
    方案一：让子元素相对父元素绝对定位
        父相子绝
            子（高已知）： top: 50%;margin-top: -子高一半
            子（高未知）： top: 50%;transform: translateY(-50%);
    方案二： 父元素 {display: flex; flex-direction:column; justify-content: center;}

三、垂直和水平同时居中：

方案一：父相子绝：
    子（宽高已知）： top: 50%; left: 50%; margin-left: -子宽一半; margin-top: -子高一半
    子（宽高未知）： top: 50%; left: 50%; transform: translate(-50%, -50%)
方案二： 
    .son {display: flex; justify-content: center; align-item: center; }
    

提问： 块级元素内部一定可以嵌套块级元素吗？

不一定。如p元素嵌套h1元素

 效果： 

不可自由嵌套的元素（就是里面只能放内联元素）：

标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>
段落标记的<p>
分割线<hr>
一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。