css3实现水平垂直居中的十种方案

css/css3实现水平垂直居中的十种方案

html代码：

 <h1 class="app">
        <div></div>
    </h1>

1. 第一种方案

子元素高度可以设定也可以不设定

 .app {
   
            width: 200px;
            height: 200px;
            background-color: yellow;
            display: flex;
            align-items: center;/*垂直居中*/
            justify-content: center;/*水平居中*/
        }
        .app>div {
   
            width: 100px;
            height: 100px;
            background-color: green;
        }

2. 第二种方案

子元素高度可以设定也可以不设定

 .app {
   
            width: 150px;
            height: 150px;
            background-color: yellow;
            position: relative;
        }
        .app>div {
   
            width: 50px;
            height: 50px;
            background-color: green;