实现HTML元素垂直居中的六种方法

一、 img的垂直水平居中

使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素上,就注意下面的display设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style type="text/css">
    .main{
      width: 400px;
      height: 400px;
      background-color: #aaa;
      display: table;/*父元素设置表格属性*/
      text-align: center;
    }
    .main span{
      display: table-cell;/*img设置成表格元素属性*/
      vertical-align: middle;/*两个display设置后这个属性就起作用*/
    }
  </style>
</head>
<body>
    <div class="main">
      <span><img src="1.jpg" alt="/" width="150px"></span>
    </div>
</body>
</html>
  • 注意:display:table-cell,这是对类似文字元素起作用的,所以包含在span标签内 *对于文字居中也h1,span,p等类似文字标签都可以这样设置居中

二、 div的垂直水平居中

这种方法同样适用于img,只需将child换成img就行,不再需要span了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style type="text/css">
    .main{
      width: 400px;
      height: 400px;
      background-color: #aaa;
      position: relative;
    }
    .child{
      width: 200px;
      height: 200px;
      background-color: rgb(39,40,34);
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
    <div class="main">
      <div class="child"></div>
    </div>
</body>
</html>

三、简便实现大部分元素的垂直居中

水平居中,如果是文本(内联元素)text-align:center,div(块级元素)margin:0 auto;,,所以我就不写水平居中了,别嫌我懒哦

  • 会使用到属性display:flexalign-items
  • 我大概说一下,display:flex,将对象作为弹性伸缩盒显示
  • align-items:定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
.main{/*给父容器设置*/
display:flex;
align-items:center;/*所有子元素都垂直居中了*/
}

四、使用css3 属性transform

 transform: translateY(50%);/*给子元素设置*/
  • transform: translateX(50%)也可以水平居中,但是上面已经说了,可以使用margin: 0 auot(块级),text-align(内联),水平垂直居中transform: translateX(50%) translateY(50%);

上面的所有垂直居中优点:是根本不需要知道父元素和子元素的尺寸,那下来下面的方法需要知道尺寸,但是不是不好,有的地方使用可能会很方便,看你项目中的情况

五、单行文本的垂直居中

  • 设置文字的line-height==父元素的height
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style type="text/css">
    .block{
      height: 80px;
      background-color: blue;
      line-height: 80px;/*值与父元素高度相等*/
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="block">单行文本垂直居中</div>
</body>
</html>

六、需要知道子元素的尺寸

  • 实现 水平与垂直居中
/*省略了尺寸的设置,侧重了重点,读者可以把部分内容加上*/
    .main{/*父元素*/
      position: relative;
    }
    .child{/*子元素*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: /*负的自身宽度一半*/
        margin-top: /*负的自身高度一半*/
    }

七、总结

以上的六种方法的兼容性我没有一一测试,如果读者有好的意见,希望您提出来,谢谢


文章一: 个人搭建翻墙服务器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

CSS日常踩坑后的总结(猜测你也会遇到的,持续更新。。。)

可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,这里的宽度指的是设置为绝对定位的元素的宽度

1333
来自专栏cnblogs

【垂直居中高级篇】你不知道的垂直居中方式

      在Css中对元素进行水平居中是很简单的,如果他是一个行内元素,对它的父元素应用text-align:center;如果是一个块级元素,就对自身应用...

2058
来自专栏Android干货

自定义控件详解(三):Canvas效果变换

2845
来自专栏前端知识分享

第212天:15种CSS居中的方式,最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

911
来自专栏Android干货

自定义控件详解(一):Paint类与Canvas类

1934
来自专栏用户画像

导航页下拉菜单

1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

1162
来自专栏Micro_awake web

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: ...

3686
来自专栏我分享我快乐

CSS心得宝典

初学者必备 Html属性不能重复使用,但css的属性是后写的替换先写的 子级标签属性会继承父级标签属性 子级标签属性与父级冲突,子级优先 布局级别就是排队级别...

43110
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3213
来自专栏yang0range

CSS的盒子模型

一个盒子中主要的属性就5个:width、height、padding、border、margin。 width是“宽度”的意思,CSS中width指的是内容的...

1753

扫码关注云+社区

领取腾讯云代金券