元素居中的最快方式

元素居中的最快方式： 盒子元素水平垂直居中的最快方式是使用grid布局中的place-content: center;样式

文字元素垂直居中的最快方式是使用align-content: center;样式

CSS代码

.container {
    width: 800px;
    height: 800px;
    background-color: aqua;
    display: grid;
    place-content: center; /* 盒子元素水平垂直居中的最快的方式 */
}

.box {
    width: 400px;
    height: 400px;
    background-color: skyblue;
    text-align: center;
    align-content: center; /* 文字元素水平垂直居中的最快的方式 */
}

HTML代码

<div class="container">
    <div class="box">这是一个盒子</div>
</div>