CSS 简易居中 - 让你的偶像站在C位

居然有人总结了15种居中方式... 太多了,记不住。我们就说说三种简单常用的。

来,我们让蔡徐坤站在C位(水平垂直居中):

<body>
    <div class="stage" style="height: 200px;background:aliceblue">
        <div class="center">
            蔡徐坤
        </div>
    </div>
</body>

1.flex

.stage {
     display: flex;
      justify-content: center;
      align-items: center;
 }

等效

.stage {
     display: flex;
 }
.center {
     margin: auto;
 }

2.absolute

.stage {
    position: relative;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.line-height

.stage {
    height: 200px;
}
.center {
    text-align: center;
    line-height: 200px;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。