css 水平垂直居中显示（定高不定高定宽不定宽）

position 元素已知宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
             600px;
            height:600px;
            position: relative;
        }
        .child{
            background-color: rosybrown;
             300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

position 元素未知宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 300px;
            position: relative;
        }
        .child{
            background-color: #F00;
             100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

position 可以不知道宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 500px;
             500px;
           position: relative;
        }
        .child{
            background-color: #F00;
             200px;
            height: 200px;
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

flex可以不知道宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 500px;
             500px;
            display: flex;/*flex布局*/
            justify-content: center;/*使子项目水平居中*/
            align-items: center;/*使子项目垂直居中*/
        }
        .child{
            background-color: #F00;
             200px;
            height: 200px;

        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
               hello word!!!
           </div>
       </div>
</body>
</html>

table-cell布局需要三个标签相对麻烦因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style>
        .father{
            background-color: #FF8C00;
            height: 500px;
             500px;
            display: table; 
        }
        .child{
            background-color: #F00;
             200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;/*使子元素垂直居中*/
            text-align: center;/*使子元素水平居中*/
        }
        .childInner{
            background-color: #000;
            display: inline-block;/*使子元素呈现块状*/
             100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="father">
           <div class="child">
              <div class="childInner"> hello word!!!</div>
           </div>
       </div>
</body>
</html>