如何让一个 div 水平垂直居中

淩亂°似流年 2022-11-07 14:47 12阅读 0赞

<div class="parent">
        <div class="child"></div>
    </div>

## **1. 使用flex布局** ##

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

## **2. 使用绝对定位** ##

.parent {
        position: relative;
    }
    .child {
        position: absolute;
        /* top和left是以左上角为坐标原点 */
        top: 50%;
        left: 50%;
        /* transform：translate的属性值为百分数时，是以元素自身为参考 */
        transform: translate(-50%,-50%);
    }
    /* 或者 */
    .child {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

## **3. flex的另一种方法** ##

.parent {
        display: flex;
    }
    .child {
        margin: auto;
    }

## **4. table布局** ##

.parent {
        display: table;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

## **5. grid布局** ##

.parent {
        display: grid;
    }
    .child {
        justify-self: center;
        align-self: center;
    }

--------------------

以上是我整理的一些方法，当然还有其他的，有待探讨。

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1、 div.pare

小鱼儿/ 2023年10月12日 08:11/ 0 赞/ 42 阅读

相关 DIVs水平垂直居中

.login-container { height: 260px; margin: 0 auto; /水平居中/ margin-top:

迈不过友情╰/ 2023年07月07日 03:37/ 0 赞/ 39 阅读

相关 div垂直水平居中

第一种方法：flex布局 <style> .parent { width: 200px; height:

墨蓝/ 2023年06月05日 11:19/ 0 赞/ 31 阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 305 阅读

相关如何让一个 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1. 使用flex布局

淩亂°似流年/ 2022年11月07日 14:47/ 0 赞/ 13 阅读

相关子div水平垂直居中及 div中label水平垂直居中

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-e

客官°小女子只卖身不卖艺/ 2022年11月06日 15:54/ 0 赞/ 270 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 328 阅读

相关 DIV+CSS如何让文字垂直居中？

CSS网页布局DIV水平居中的各种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它

不念不忘少年蓝@/ 2022年07月16日 11:47/ 0 赞/ 304 阅读

相关 DIV+CSS如何让文字垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里

Bertha 。/ 2021年11月29日 05:54/ 0 赞/ 493 阅读

相关如何让一个元素水平垂直居中？

这问题大概分为两种类型，看要求，元素有没有被设置宽高一、元素被设置了宽高（默认为350px\300px） 1.利用绝对定位 box{ positi

拼搏现实的明天。/ 2021年10月01日 04:46/ 0 赞/ 440 阅读