[大数据] 第 19 题：让一个 div 水平垂直居中有几种方式？

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 大数据 -> 第 19 题：让一个 div 水平垂直居中有几种方式？ -> 正文阅读

[大数据]第 19 题：让一个 div 水平垂直居中有几种方式？

实现上方效果，下面列举几个常用的方法，个人比较推荐用 flex 布局实现

方式 1（利用 margin 和绝对定位）

html

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

css

.container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #000;

    .box {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background-color: #fff;
    }
}

方式 2（利用 flex 布局）

html

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

css

.container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 50px;
        height: 50px;
        background-color: #fff;
    }
}