第一种方法 使用CSS3中的flex布局

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            /*使用flex布局*/
            display: flex;
            /*使内容垂直居中*/
            justify-content: center;
            /*使内容水平居中*/
            align-items: center;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #00adeb;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

第二种方法 使用flex + margin

CSS代码

       .content{
            width: 600px;
            height: 600px;
            border: 2px rebeccapurple solid;
            display: flex;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #00adeb;
            border: #5E72E4 2px solid;
            margin: auto;
        }

HTML代码

    <div class="content">
        <div class="box"></div>
    </div>

效果

第三种 使用flex + align-self

align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: 2px rebeccapurple solid;
            display: flex;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 2px rebeccapurple solid;
            background-color: #5E72E4;

            align-self: center;
            margin: auto;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

第四种 使用flex + grid

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: rebeccapurple 2px solid;
            display: grid;
        }
        .box{
            width: 300px;
            height: 300px;
            border: rebeccapurple 2px solid;
            margin: auto;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

第五种方法 使用grid布局

CSS代码

       .content{
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            display: grid;
        }
        .box{
            width: 300px;
            height: 300px;
            border: #3f87a6 2px solid;
            /*水平居中*/
            justify-self: center;
            /*垂直居中*/
            align-self: center;
        }

HTML代码

    <div class="content">
        <div class="box"></div>
    </div>

效果

第六种 margin

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: #3f87a6 2px solid;
        }
        .box{
            width: 300px;
            height: 300px;
            border: #5E72E4 2px solid;
            margin: calc(50% - 150px) auto 0 auto;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

第七种 postion

CSS代码

        .content {
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            position: relative;
        }

        .box {
            width: 300px;
            height: 300px;
            border: #5E72E4 2px solid;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

第八种 postion

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            position: relative;
        }
        
        .box{
            width: 300px;
            height: 300px;
            border: #5E72E4 2px solid;
            position: absolute;
            top: calc(50% - 150px);
            bottom: 50%;
            left:  calc(50% - 150px);
        }

HTML代码

    <div class="content">
        <div class="box"></div>
    </div>

效果

第九种 postion + transform

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            position: relative;
        }
        
        .box{
            width: 300px;
            height: 300px;
            border: #5E72E4 2px solid;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

HTML代码

    <div class="content">
        <div class="box"></div>
    </div>

效果

第十种 转块级元素

CSS代码

        .content{
            width: 600px;
            height: 600px;
            border: #5E72E4 2px solid;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .box{
            width: 300px;
            height: 300px;
            border: #5E72E4 2px solid;
            display: inline-block;
        }

HTML代码

<div class="content">
    <div class="box"></div>
</div>

效果

单元素盒子内容居中

CSS代码

        .content{
            width: 600px;
            height: 80px;
            line-height: 80px;
            background-color: pink;
            text-align: center;
        }

HTML代码

<div class="content">你好呀</div>

效果