table-cell width and height is provided, centrally

The default table-cell content is determined by the width and height

    <style type="text/css" rel="stylesheet">
        .content {
            color: white;
        }
        
        .cell {
            background-color: blue;
            display: table-cell;
        }
    </style>

    <div class="content">
        <div class="cell">
            test
        </div>
    </div>

Fixed width and height may be provided:

 .cell {
            background-color: blue;
            display: table-cell;
            width: 100px;
            height: 100px;
        }

Set directly Wide high percentage is not valid because the table is no explicit statement, plus the default width and height of the table is determined by the content, all the percentages to be used, must explicitly declare the table and define the width and height (row default full table)

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>cell</title>
</head>

<body>

    <style type="text/css" rel="stylesheet">
        .content {
            color: white;
        }
        
        .table {
            display: table;
            width: 100%;
            height: 200px;
        }
        
        .cell {
            background-color: blue;
            display: table-cell;
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="content">
        <div class="table">
            <div class="cell">
                test
            </div>
        </div>

    </div>
</body>

</html>

the contents of the cell centered horizontally

.cell {
            background-color: blue;
            display: table-cell;
            width: 100%;
            height: 100%;
            text-align: center;
        }

cell contents vertically centered in:

 .cell {
            background-color: blue;
            display: table-cell;
            width: 100%;
            height: 100%;
            text-align: center;
            vertical-align: middle;
        }

Note: Set line-height: 100%; invalid, unable to make the text vertically centered, set the line-height: 200px; can also be centered vertically

table-cell width and height is provided, centrally

Guess you like