实现元素的垂直与水平居中的六种方法

一、 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: /*负的自身高度一半*/
    }

七、总结

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

时间: 2024-10-27 13:03:41

实现元素的垂直与水平居中的六种方法的相关文章

Css实现垂直水平居中的六种方法

经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 600px;height: 180px; background-color:#56abe4; color: #fff; margin: 15px auto; border-radius: 3px; } .con{ display: inline-block; padding: 15px; width:

css中各种情况下的元素的垂直和水平居中的问题

问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height:100px; line-height:100px;} //外边的容器的css设置和命名 这样就ok了   No2:里边的容器是img元素 .container{width:200px; height:100px; line-height:100px; vertical-align:middle;

js实现未知宽高的元素在指定元素中垂直水平居中

js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.soft

css属性设置元素的垂直对齐方式

vertical-align 属性设置元素的垂直对齐方式. 可能的值 值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-he

css/css3实现未知宽高元素的垂直居中和水平居中

其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要,下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法 ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 ) 第一种 css3的transform .ele{ /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 50%; /*css3 transform 实现*/ transform: translate(

元素居中的六种方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

居中的六种方法

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说<CSS制作水平垂直居中对齐>中介绍了八中实现水平垂直的方案,而在<CSS制作图片水平垂直居中>一文介绍了四种实现图片垂直居中的方案,并且在<CSS3实现水平垂直居中>使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法.当然大家有可能认为这些

2014一级建造师备考,10种记忆高招,背书六种方法

 10种记忆高招: 1.注意集中记忆时只要聚精会神.专心致志,排除杂念和外界干扰,大脑皮层就会留下深刻的记忆痕迹而不容易遗忘.如果精神涣散,一心二用,就会大大降低记忆效率. 2.兴趣浓厚如果对学习材料.知识对象索然无味,即使花再多时间,也难以记住. 3.理解记忆理解是记忆的基础.只有理解的东西才能记得牢记得久.仅靠死记硬背,则不容易记得住.对于重要的学习内容,如能做到理解和背诵相结合,记忆效果会更好. 4.过度学习即对学习材料在记住的基础上,多记几遍,达到熟记.牢记的程度. 5.及时复习遗忘的速

CSS导航菜单水平居中的多种方法

在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知宽度的元素居中,下面我们会列出几种方法来解决水平居中问题.当然这些方法不一定是用来解决导航菜单问题,还有其它类似情况也是可以使用的. 在线演示:Demo CSS导航菜单水平居中的多种方法: 方法1:display:inline-block 方法2:position:relative 方法3:display:table 方法4:dis