块级子元素在父元素中实现水平垂直居中

深藏阁楼爱情的钟 2022-06-05 22:26 247阅读 0赞

源代码：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8"> 
    <style> .fu{ background-color:pink;width:400px;height:400px;} .zi{ background-color:skyblue;width:100px;height:100px;} </style>
    </head>
    <body>
    <div class="fu">
        <div class="zi"></div>
    <div>
    </body>
    </html>

方法一：

.fu{ position: relative; }
    .zi{ position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; }

方法二：

.fu{ position: relative; }
    .zi{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

方法三：

//添加以下样式(使用css3定义的新属性 IE10+)
    
    .fu{
       display:flex;}
    
    //将父元素设为弹性容器也可设为display:inline-flex;
    //两者的区别是设为inline-flex该元素视为内联元素
    
    .zi{
       margin:auto;}

方法四：

//使用css3定义的新属性 IE10+
    .fu{
        display:flex;
        justify-content: center; //子元素水平方向居中
        align-items: center;//子元素垂直方向居中
    }

方法五：

//IE10+
    .fu{
        position: relative;
    }
    .zi{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        //使该元素分别向左和上移动宽高一半的距离
    }

发表评论取消回复

表情：

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

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

相关阅读

相关居中一个元素(水平+垂直居中)

我们的示例代码全在此基础上修改： ...... <style> { margin: 0;

末蓝、/ 2023年10月15日 10:44/ 0 赞/ 74 阅读

相关水平居中块级元素

![SouthEast][] 如上图所示，要做图中黄色区域的到期提醒，要求提醒的内容（提醒的内容是指黄色背景上的图标和文字）居中显示。我将图中的惊叹号标识做为提醒内容的

心已赠人/ 2022年09月19日 01:26/ 0 赞/ 178 阅读

相关块级元素在块级别元素中居中

引言: 通常情况下块级元素重置居中有两种方式 1.利用margin值 2.利用定位和负边距但是一次我遇到这种情况(子块级元素高度是自适应的，高度值不确定)，以上方法就不

雨点打透心脏的1/2处/ 2022年07月17日 04:19/ 0 赞/ 175 阅读

相关块级子元素在父元素中实现水平垂直居中

源代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

深藏阁楼爱情的钟/ 2022年06月05日 22:26/ 0 赞/ 248 阅读

相关 position实现块级元素垂直居中

块级元素垂直居中（position方法）， css部分： \\{padding: 0;margin: 0;\} body,html,.wrap\{width: 10

布满荆棘的人生/ 2022年05月18日 00:17/ 0 赞/ 209 阅读

相关用Flex布局实现块级元素垂直居中

块级元素垂直居中（Flex布局方法）： css部分： \\{padding: 0;margin: 0;\} body,html,.wrap\{width: 10

清疚/ 2022年05月18日 00:13/ 0 赞/ 219 阅读

相关未知大小（不定宽高）的子元素在父元素中水平垂直都居中

方案1：父元素：\{ position:relative; \} 子元素：\{ position:absolute; left:0; right:0;

女爷i/ 2022年04月10日 07:53/ 0 赞/ 254 阅读

相关块级元素水平垂直居中方法

目录一.脱离文档流 1.有没有宽高都可以 2.必须要有宽高二.没有脱离文档流 1.有无宽高都可 2.有宽高 -------------------- 一.

冷不防/ 2022年02月19日 10:51/ 0 赞/ 251 阅读

相关 div块元素垂直水平居中方法总结

1、已知块级元素的宽和高，使用绝对定位+外边距设定水平垂直居中。父元素position:relative，子元素position:absolute;top:50%;le

﹏ヽ暗。殇╰゛Y/ 2021年12月16日 12:39/ 0 赞/ 392 阅读

相关 css实现元素水平垂直居中

1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的positi

刺骨的言语ヽ痛彻心扉/ 2021年09月18日 16:12/ 0 赞/ 454 阅读