精华内容
下载资源
问答
  • 水平垂直居中
    2022-03-25 14:40:39

    水平居中

    行内元素

    行内元素想要水平居中,只需要给父元素添加text-align:center即可。

    <div class='container'>
      <span>example</span>
    </div>
    
    .container {
      text-align: center;
    }
    
    span {
      border:1px solid red;
    }
    

    块级元素

    定宽块级元素

    给需要居中的块级元素加margin:0 auto,但是块级元素一定要有width

      .center{
          width:200px;
          margin:0 auto;
          border:1px solid red;
      }
      <div class="center">水平居中</div>
    

    不定宽块级元素

    方法1:转换为table

    先给要居中的元素设置display:table,然后设置margin:0 auto

      .center{
          display:table;
          margin:0 auto;
          border:1px solid red;
      }
      <div class="center">水平居中</div>
    

    方法2:设置inline-block(多个块级元素)

    如果多个块级元素要水平居中,则给子元素设置display:inline-block,再给父元素设置text-align:center

      .center{
          text-align:center;
      }
      .inlineblock-div{
          display:inline-block;
      }
      <div class="center">
          <div class="inlineblock-div">1</div>
          <div class="inlineblock-div">2</div>
      </div>
    
    

    方法3:flex布局

      .center{
          display:flex;
          justify-content:center;
      }
      <div class="center">
          <div class="flex-div">1</div>
          <div class="flex-div">2</div>
      </div>
    

    方法4:position + 负margin;

    方法5:position + margin:auto;

    方法6:position + transform;

    注:这里方法4、5、6同下面垂直居中一样的道理,只不过需要把top/bottom改为left/right,在垂直居中部分会详细讲述。

    垂直居中

    单行文本垂直居中

    • 设置padding-toppadding-bottom相等
    • 设置line-height=height

    块级元素垂直居中

    方法一:flex布局

      <div class="container">
        <div>example</div>
      </div>
      
    .container {
      border: 1px solid red;
      height: 100px;
      display: flex;
      align-items: center;
    }
    

    方法二:绝对定位,top:0,负margin(需知自身宽高)

    • 对要居中的元素设置position:absolute,父元素设置position:relative
    • 居中元素设置top:50%,再设置margin-top:,值为自身height一半的负数
      <div class="parent">
        <div class="child"></div>
      </div>
    
    .parent {
      position: relative;
      border: 1px solid red;
      height: 300px;
    }
    
    .child {
      position: absolute;
      border: 1px solid blue;
      height: 100px;
      width: 100px;
      top:50%;
      margin-top: -50px;
    }
    
    

    在这里插入图片描述

    方法三:绝对定位,top/bottom=0,margin:auto

    • 对要居中的元素设置position:absolute,父元素设置position:relative
    • 居中元素设置top: 0, bottom:0, margin:auto
      <div class="parent">
        <div class="child"></div>
      </div>
    
    .parent {
      position: relative;
      border: 1px solid red;
      height: 300px;
    }
    
    .child {
      position: absolute;
      border: 1px solid blue;
      height: 100px;
      width: 100px;
      top: 0;
      bottom: 0 ;
      margin: auto;
    }
    

    注:上述的块级垂直居中方法,稍加改动,即可成为块级水平居中方法,如top/bottom换成left/right

    水平垂直居中

    flex布局

    .parent {
      border: 1px solid blue;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .child {
      border: 1px solid red;
      height: 100px;
      width: 100px;
    }
    

    在这里插入图片描述

    绝对定位+top/bottom/left/right:0+margin:auto

    
    .parent {
      position: relative;
      border: 1px solid blue;
      height: 300px;
    }
    
    .child {
      position: absolute;
      border: 1px solid red;
      height: 100px;
      width: 100px;
      top: 0;
      bottom: 0;
      left: 0;
      right:0 ;
      margin: auto;
    }
    

    绝对定位+left/top:50%+负margin(需知自身宽高)

    .parent {
      position: relative;
      border: 1px solid blue;
      height: 300px;
    }
    
    .child {
      position: absolute;
      border: 1px solid red;
      height: 100px;
      width: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
    

    绝对定位+transform

    .parent {
      position: relative;    
      border: 1px solid blue; 
      height: 300px;
    }
    
    .child {
      position:absolute;
      border: 1px solid red;
      height: 100px;
      width: 100px;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%)
    }
    

    绝对定位+calc

    .parent {
      position: relative;
      border: 1px solid blue;
      height: 300px;
    }
    
    .child {
      position: absolute;
      border: 1px solid red;
      height: 100px;
      width: 100px;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }
    

    父元素table-cell,vertical-align,text-align,子元素inline-block

    .parent {
      border: 1px solid blue;
      height: 300px;
      width: 300px;
      display: table-cell;
      vertical-align:middle;
      text-align: center;
    }
    
    .child {
      border: 1px solid red;
      height: 100px;
      width: 100px;
      display: inline-block;
    }
    

    父元素table-cell,vertical-align,子元素margin:0,auto

    .parent {
      border: 1px solid blue;
      height: 300px;
      width: 300px;
      display: table-cell;
      vertical-align:middle;
    }
    
    .child {
      border: 1px solid red;
      height: 100px;
      width: 100px;
      margin: 0 auto;
    }
    
    更多相关内容
  • div框水平垂直居中跟内容垂直居中
  • 很多情况需要用到div的居中,下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。
  • 主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来一起看看吧。
  • 有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一...
  • 在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下:...
  • CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
  • Flexbox实现一个div元素在body页面中水平垂直居中: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="utf-8"/>  <title>Flexbox...
  • 最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便 1.居中文本 复制代码代码如下:”wrap”> 我在中间…… </div>.. height+line-height+text-center(只能居中单行) .wrap{ width:px; height:px...
  • 原始代码: center.html: <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
  • 主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前些天在W3CPlus看到了一篇文章,提到用CSS制作水平垂直居中,在测试其中的第六点时发现了一些小问题: 添加了一个无意义的新标签 复制代码代码如下: ”extra”> 当设定内容宽度的时候,文本换行了 对于第一点,...
  • NULL 博文链接:https://highfly-s.iteye.com/blog/1878910
  • html水平垂直居中

    千次阅读 2022-04-03 15:43:52
    居中对齐的集中几种方式

    居中对齐的几种方式

    水平居中对齐的几种方式

    1.对于最简单的行内元素的居中采用text-align:center;设置即可//1.注意是父元素添加2.子元素会继承父元素的居中方式

    父元素添加 text-align: center;子元素中的所有的行内标签都会水平居中,块级标签中的文字也会居中,即是说,父元素拥有text-align: center;子元素中的字体和行内元素都会居中,并且效果延续至子代。

    text-align:center;//父元素拥有,子元素水平居中  
    

    在这里插入图片描述

     <div class="ta">
            <!-- //块级元素 -->
            <p>你好 世界</p>
            你好 世界 //
            <h1>你好 世界</h1>
            <div>你好 世界</div>
            <!-- 行内元素 -->
            <img src="./搜索.svg" alt="">
        </div>
         .ta {
            width: 400px;
            height: 400px;
            background-color: rgb(137, 177, 177);
            text-align: center;
            display: inline-block;
            /* overflow: hidden; */
        }
    
        .ta p {
            font-size: 120%;
        }
    
        .ta div {
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    
    

    遇到了高度塌陷

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3tjE8mWS-1649927421009)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220403171346476.png)]

    2.marin:0 auto;对于已知宽度的元素使用,实现水平居中。

     <div class="content content2">
            <div class="center2">
                划线区域部分采用margin:0 auto;来实现水平居中显示,需提前写好元素的宽度。
            </div>
        </div>
      
      .content {
            height: 100px;
            border: 2px solid #fff;
        }
        .content2 {
            background: #645d5a;
            text-align: center;
        }
    
        .center2 {
            height: 50px;
            width: 60%;
            border: 2px solid rgb(207, 136, 136);
            line-height: 50px;
            margin: 0 auto;
        }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8I79BtZF-1649927421009)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220404211037347.png)]

    3.table始现水平居中 1. 将外部块格式化为表格单元格就可垂直居中文本。2.元素外部嵌套table始现。

     <div class="content content3">
           <table><tbody><tr><td>
              这是内容区三:用table实现。
            </td></tr></tbody></table>
    </div>
    .content3{
        background: #2f5d34;
    }
     table{
     margin: 0 auto;
     }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2qaR8km-1649927421010)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220404210911717.png)]

    4.块级的元素转换为行内块元素来实现块级元素的水平居中显示。

    <div class="content content4">
            <div class="center4">
                块级元素转换成行内元素并且居中
            </div>
        </div>
     .content4 {
            background: #9d43b4;
            text-align: center;
        }
    
        .center4 {
            display: inline;
        }
    

    在这里插入图片描述

    5.利用定位使元素居中,计算方式 父元素的宽度减去子元素的宽度 除以2 得到left或right的值,注意相对定位和绝对定位的应用。

      <div class="fu">
            <div class="er">
                我是中间的
            </div>
        </div>
        <style>
        .fu {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
    
        .er {
            position: relative;
            text-align: center;
            line-height: 150px;
            width: 150px;
            height: 150px;
            left: 175px;
            top: 175px;
            background-color: aliceblue;
        }
    </style>
    		
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLUGrqwa-1649927421010)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220414165804527.png)]

    垂直居中的几种方式

    1.给父元素添加

    line-height:(height);//height为父元素的高度
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kx0hbxt5-1649927421011)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220403172401628.png)]

     <div>
     <p>你好 世界</p>
     </div>
     div{
      width: 200px;
            height: 200px;
            line-height: 200px;
     }
    

    2.文字水平垂直居中 给父类元素加 vertical-align: middle; 但是这个元素有时会失灵 那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内。

    <div class="three">
            你好 世界
    </div>
      .three {
            width: 400px;
            height: 200px;
            background: #ddd;
            display: table-cell;
            vertical-align: middle;
        }
    

    将外部块格式化为表格单元格 表格单元格的内容可以垂直居中,将外部块格式化为表格单元格就可垂直居中文本。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jsVNHyaz-1649927421011)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220404201141857.png)]

    3.利用flex布局垂直居中

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwtiBlRB-1649927421012)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220404202744941.png)]

     <div class="box">css 垂直居中--文本文字(弹性布局)</div>
     
        .box {
            display: flex;
            /*实现垂直居中*/
            align-items: center;
            /*实现水平居中*/
            justify-content: center;
            text-align: justify;
            width: 400px;
            height: 200px;
            background: rgb(80, 76, 76);
            margin: 0 auto;
            color: rgb(0, 0, 0);
        }
    

    4.利用内边距 //使用不多 用起来比较麻烦

    <div class="wai">
            <div class="nei">
                中间
            </div>
        </div>
          .wai {
            width: 500px;
            height: 500px;
            background-color: aqua;
            padding-top: 300px;
            padding-left: 300px;
        }
    
        .nei {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
    
        }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BHuAYw98-1649927421012)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220414170946507.png)]

    5.利用CSS3的定位 position加上transform来实现文字垂直居中 仅作代码展示 //兼容性低

    .center {
    
      position: relative;
    
      top:50%;
    
      transform:translateY(-50%);
    
      left:50%;
    
      transform:translateX(-50%);
    }
    

    6.相对绝对定位 和上文的水平居中类似不做过对赘述。

    7.定位加上margin 元素

     <div class="child"></div>
    .child {
            position: fixed;
            width: 200px;
            height: 150px;
            background: blue;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -100px;
        }
    
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZj10MPC-1649927421012)(C:\Users\王云飞\AppData\Roaming\Typora\typora-user-images\image-20220414170305330.png)]

    以上种种只是我总结出的居中方式,当然居中方式还有很多

    展开全文
  • 设置img在表格table中的单元格td中水平垂直居中,想必很多的朋友都想实现此效果吧,接下来为大家详细介绍下实现代码,感兴趣的你可不要错过了哈或许对你有所帮助
  • 16种CSS水平垂直居中方法

    千次阅读 2022-03-22 16:44:20
    16种css水平垂直居中方法以及应用(文字、图片) 一、垂直居中 1、行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 ...

    16种css水平垂直居中方法以及应用(文字、图片)

    一、垂直居中
    1、行内元素

    基本思想:单行文本子元素line-height 值为父元素 height 值

    .parent {
        height: 200px;
    }
    
    .son {
        line-height: 200px;
    }
    
    2、块级元素
    2.1行内块级元素

    基本思想:元素是行内块级,使用display: inline-block, vertical-align: middle+伪元素处于容器中央

    兼容性:支持IE7

    .parent::after, .son{
        display:inline-block;
        vertical-align:middle;
    }
    .parent::after{
        content:'';
        height:100%;
    }
    
    2.2table布局

    兼容性:支持IE6/IE7,IE8无效

    .parent {
      display: table;
    }
    .son {
      display: table-cell;
      vertical-align: middle;
    }
    
    2.3flex弹性布局

    2009版写法

    兼容性:不支持IE

    .parent {
        display: box;
        box-orien: vertical;
        box-pack: center;
    }
    

    2012版写法

    兼容性:IE8/IE9不支持

    .parent{
      display:flex;
      justify-content:center;
    }
    .son{
      align-self:center;
    }
    
    2.4绝对定位+transform:translate(-50%,-50%)
    .parent{
      position:relative;
    }
    .son{
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
    
    二、水平居中
    1、行内元素

    基本思想:父元素设置text-align: center即可实现行内元素水平居中

    .parent {
        text-align: center;
    }
    
    2、块级元素
    2.1一般居中

    基本思想:该元素设置margin:0 auto

    .son {
        margin: 0 auto;
    }
    
    2.2子元素含float

    基本思想:子元素包含 float:left 属性, 让父元素宽度设置为fit-content,并且配合margin,fit-content是css3的新属性值

    .parent{
        width:fit-content;
        margin:0 auto;
    }
    
    .son {
        float: left;
    }
    
    2.3 flex弹性布局

    2009版本写法

    .parent{
        display:box;
        box-orient:horiaontal;
        box-pack:center;
    }
    

    2012版写法

    .parent{
        display:flex;
        justify-content:center;
    }
    
    2.4绝对定位
    • transform
    .son{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
    }
    
    • 负值margin-left
    .son{
        position:absolute;
        with:固定宽度
        left:50%;
        margin-left:-0.5*固定宽度;
    }
    
    • left:0;right:0;margin:0 auto
    .son{
        position:absolute;
        width:固定宽度;
        left:0;
        right:0;
        margin:0 auto;
    }
    
    三、具体应用–文字居中
    3.1css如何设置文字水平居中

    基本思想:css使用text-align规定水平对齐方式,影响一个元素的文本行相互的对齐方式。center值设置文本居中

    注意:text-align应用与容器,针对容器里面的文字以及容器里面的display:inline/inline-block,若是display:block无影响

    text-align具备向下传递的特点,设置一个div,div里面的也会居中

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 水平居中了--文本文字</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    3.2css如何设置文字垂直居中
    • 单行文本:基本思想是行高(line-height)和所在区域高度(height)设置一致
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 80px;
                background: rgb(228, 178, 187);
                line-height: 80px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--单行文本</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    • 多行文本

    (1)当父级元素高度不固定

    当父级元素不固定,会随着内容变化,高度只能通过文本的高度来撑开,所以需要使用内填充padding来使多行文本居中。只需要设置padding-top的值与padding-bottom的值相等

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                margin: 50px auto;
                background: rgb(228, 178, 187);
                padding-top: 50px;
                padding-bottom: 50px;
                padding-right: 20px;
                padding-left: 20px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度不固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    (2)当父级元素高度固定

    vertical-align:middle +display:table-cell

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 500px;
                height: 100px;
                background: rgb(228, 178, 187);
                vertical-align: middle;
                display: table-cell;
            }
        </style>
    </head>
    
    <body>
        <div class="box">css 垂直居中--多行文本--父级高度固定</div>
    </body>
    
    </html>
    

    在这里插入图片描述

    四、具体引用–图片居中
    4.1display:table

    基本思想:最外层div display: table+img父元素display: table-cell、vertical-align: middle

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    思考:如何在图片垂直居中基础上+水平居中

    基本思想:最外层div text-align: center(具有向下传递的特点)

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: table;
                text-align: center;/*增加的一行代码*/
            }
    
            #imgbox {
                display: table-cell;
                vertical-align: middle;
            }
    
            #imgbox img {
                width: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div id="imgbox">
                <img src="1.jpg" alt="图片1">
            </div>
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.2flex实现

    基本思想:display: flex;align-items: center

    兼容性:不是最好的选择,IE8/IE9不支持

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                display: flex;
                align-items: center;
            }
    
            .imgbox img {
                width: 150px;
                height: 100px;
                align-items: center;
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    4.3绝对定位

    基本思想:img父元素相对定位position: relative+子元素绝对定位position: absolute,img的top设置为50%,负值margin-top(这个是想实现垂直居中元素高度的一半),不确定高度用transform:translateY(-50%)

    兼容性:推荐写法,兼容性好

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .imgbox {
                width: 300px;
                height: 200px;
                background: rgb(228, 178, 187);
                position: relative;
                margin: 0 auto;
            }
    
            .imgbox img {
                width: 150px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    
    <body>
        <div class="imgbox">
            <img src="1.jpg" alt="图片1">
        </div>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • CSS实现水平垂直居中

    2022-04-17 14:04:54
    方法1:适合子元素不规则排列的情况。方法2:适合子元素规则排列的情况。方法3:常用于实现文字的水平垂直居中。之后遇到新的方法会来补充。

    方法1:position + transform

    先设置一个父元素和一个子元素

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

    给父元素添加相对定位

    .father {
        position: relative; 
        /* 省略部分代码 */
    }

    给子元素添加绝对定位

    .child {
        position: absolute;
        /* 省略部分代码 */
    }

    让子元素相对父元素的宽高进行偏移

    .child {
        position: absolute;
        top: 50%;   /* 从上向下偏移父元素高度的50% */
        left: 50%;  /* 从左向右偏移父元素宽度的50% */
        /* 省略部分代码 */
    }

    当前效果:

    从效果上看,子盒子并不是想象上的水平垂直居中。这是因为 top 和 left 是根据子盒子左上角进行偏移的,因此需要用 transform 让子盒子根据自身位置再次进行平移

    .child {
        position: absolute;
        top: 50%;   /* 向下偏移父元素高度的50% */
        left: 50%;  /* 向右偏移父元素宽度的50% */
        transform: translate(-50%, -50%)
        /* 省略部分代码 */
    }

    当前效果:

     

    translate() 中的两个参数分别是相对于自身的高和宽进行 x 轴、y 轴平移。这两个参数也可以是具体的像素值,但推荐使用百分比,因为这样可以应对盒子大小会发生变化的情况,不管盒子的大小如何变化,盒子始终能保持水平垂直居中。

    方法2:display:flex;

    flex 布局也被称为弹性布局,可以非常灵活的对元素进行流式布局

    先设置一个父元素和一个子元素

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

    设置父元素的 display 属性值为:flex ,并且设置 justify-content 的属性值为:center

    .father {
        display: flex;
        justify-content: center;    /* 实现子元素在父元素中的水平居中 */
        /* 省略部分代码 */
    }

    当前效果:

    设置 align-items 的属性值为:center

    .father {
        display: flex;
        justify-content: center;    /* 实现子元素在父元素中的水平居中 */
        align-items: center;        /* 实现子元素在父元素中的垂直居中 */
        /* 省略部分代码 */
    }

    当前效果:

    采用这种方式,可以实现多个子元素水平垂直居中排列,我们给父元素添加几个子元素看看效果

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

    当前效果:

     通过添加 flex-direction: column; 还可以实现子元素纵向排列

    .father {
        display: flex;
        justify-content: center;    /* 实现子元素在父元素中的水平居中 */
        align-items: center;        /* 实现子元素在父元素中的垂直居中 */
        flex-direction: column;
        /* 省略部分代码 */
    }

    当前效果:

    flex 布局的优点不限于此,如果想要深入了解,请查阅其他文档!

    方法3: text-align + line-height

    在父元素中写一句话

    <div class="father">
        I like front end design!
    </div>

    给父元素添加 text-alignline-height 属性

    .father {
        /* 省略部分代码 */
        height: 200px;          /* 父元素的高度 */
        text-align: center;     /* 子元素水平居中对齐 */
        line-height: 200px;     /* 设置子元素的行高 */
    }

    当前效果:

    行高包括上行高文字高度下行高,因此只要使子元素的行高等于父元素的高度即可实现文字垂直居中的效果。

    总结

    方法1:适合子元素不规则排列的情况。

    方法2:适合子元素规则排列的情况。

    方法3:常用于实现文字的水平垂直居中。

    之后遇到新的方法会来补充。

    展开全文
  • 我们在编写马过程中,想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <p>d第一种 <!-...
  • 下面小编就为大家带来一篇让DIV水平垂直居中的两种完美方法推荐。一起跟随小编过来看看吧。希望给大家一个参考
  • 图片水平垂直居中

    2013-01-24 18:03:18
    图片水平垂直居中 用很精简的代码,实现图片水平垂直居中 效果
  • 主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
  • 主要介绍了html中table表格的内容水平垂直居中显示的相关资料,需要的朋友可以参考下
  • flex实现水平垂直居中 适用场景:父子宽高都可未知(比较推荐这种方式,简单,而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
  • 用 css 实现水平垂直居中的8种方式 效果图 本文将会用多种方式实现上图效果,接下来一一列举。 基本布局 /* 样式 */ .parent { width: 200px; height: 200px; border: 1px solid black; } .parent .son { width...
  • 我们在制作页面的时候,经常需要把元素进行水平垂直居中,所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法,供大家选择运用。 1.行内元素水平垂直居中的方法 1.1 水平居中 text-align:center; /* ...
  • 因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分...
  • html元素 水平居中 于 其父级元素的方法: 方法1: 复制代码代码如下: ”wrap”> ”left-right-middle1″>左右居中方法1</div> </div> 复制代码代码如下: html,body,div{ margin:0; padding:0; height:100%; ...
  • css水平垂直居中四种常用方式

    千次阅读 2022-05-10 15:04:44
    css水平垂直居中四种常用方式
  • div水平垂直居中的四种方式

    千次阅读 2021-09-08 14:17:32
    第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • CSS常用水平垂直居中的几种方法

    万次阅读 2021-12-27 09:29:36
    CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时,利用margin:auto设置元素水平垂直居中: HTML代码如下: <div class="div1"> <div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,374
精华内容 42,949
关键字:

水平垂直居中

友情链接: coremail.zip