将div元素放置在彼此的中心

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 设置父元素高度，使子元素垂直居中 */
    }
</style>

<div class="container">
    <div>我是要居中的内容</div>
</div>

<style>
    .container {
        position: relative;
        height: 100vh; /* 设置父元素高度，使子元素垂直居中 */
    }

    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="container">
    <div class="centered">我是要居中的内容</div>
</div>

<style>
    .container {
        display: grid;
        place-items: center;
        height: 100vh; /* 设置父元素高度，使子元素垂直居中 */
    }
</style>

<div class="container">
    <div>我是要居中的内容</div>
</div>