div 水平垂直居中

小鱼儿 2023-10-12 08:11 59阅读 0赞

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

1、

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

2、

div.parent {
        position: relative; 
    }
    div.child {
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  
    }
    /* 或者 */
    div.child {
        width: 50px;
        height: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -5px;
    }
    /* 或 */
    div.child {
        width: 50px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

3、

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

4、

div.parent {
        font-size: 0;
        text-align: center;
        &::before {
            content: "";
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
        }
    }
    div.child{
      display: inline-block;
      vertical-align: middle;
    }

5、

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

转载于:https://www.cnblogs.com/anbozhu7/p/11270136.html

发表评论取消回复

表情：

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

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

相关阅读

相关 div 水平垂直居中

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

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

相关 DIVs水平垂直居中

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

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

相关 div垂直水平居中

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

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

相关 div水平垂直居中

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

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

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

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

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

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

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

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

相关【前端学习】CSS——div垂直水平居中

> Author：Vivi > Time：2021-06-04 采用四种方式实习div块级元素垂直水平居中： ①position定位（子绝父相） ②positio

r囧r小猫/ 2022年10月18日 00:58/ 0 赞/ 247 阅读

相关 html布局垂直居中显示,【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为： .style\{margin:0 auto;\} 数

╰半橙微兮°/ 2022年10月09日 04:58/ 0 赞/ 305 阅读

相关实现div内img水平垂直居中

1. flex布局父元素 display: flex; justify-content: center; align-items: cente

浅浅的花香味﹌/ 2022年10月07日 03:51/ 0 赞/ 292 阅读

相关 div水平垂直居中

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

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