1.单行文字居中

2.多行文字居中

3.利用background-position:center;的图片居中

4.利用display:table-cell;属性的图片居中

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.      <title>display:table-cell;垂直居中</title>
  8.      <meta name="viewport" content="width=device-width, initial-scale=1">
  9.      <style>
  10.          .pic-box {
  11.              display: table-cell ;
  12.              background: pink;
  13.              font-size: 0 ;
  14.              text-align: center;
  15.              height: 600px;
  16.              width: 600px;
  17.              vertical-align: middle ;
  18.          }
  19.  
  20.          img{
  21.              display: inline-block ;
  22.          }
  23.  
  24.      </style>
  25.  </head>
  26.  
  27.  <body>
  28.      <div class="pic-box">
  29.          <img src="https://img.alicdn.com/bao/uploaded/i1/742862115/O1CN01yjhiHd1RUiBD5i23h_!!742862115.jpg_300x300.jpg">
  30.      </div>
  31.  </body>
  32.  
  33.  </html>

5.利用display:inline-block;属性的图片居中

6.利用position:absolute;属性的居中

　　示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>absolute居中</title>
  9.     <style>
  10.         .container-box {
  11.             background: green;
  12.             position: relative;
  13.             width: 600px;
  14.             height: 800px;
  15.             margin: 20px;
  16.         }
  17.  
  18.         .container-base{
  19.             height: 200px;
  20.             width: 200px;
  21.             position: absolute;
  22.         }
  23.  
  24.         .container-seed {
  25.             background: pink;
  26.             /*
  27.                 先将距离顶部和左边的距离都设置成50%
  28.                 再减去需要居中容器本身的一半值居中 即下方的margin 或 transform 负值回去
  29.              */
  30.             top: 50%;
  31.             left: 50%;
  32.             /* 方法一 利用margin负值回去 需要明确知道容器大小 */
  33.             margin: -100px 0 0 -100px;
  34.  
  35.         }
  36.  
  37.         .container-seed2 {
  38.             background: white;
  39.             top: 50%;
  40.             left: 50%;
  41.             /* 方法二 利用transform 的translate 平移自身的的负值的50%  需要测试解除注释即可同时注释margin  该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小*/
  42.             transform: translate(-50%, -50%);
  43.         }
  44.  
  45.         .container-seed3 {
  46.             background: #a4c2eb;
  47.             top: 0;
  48.             left: 0;
  49.             right: 0;
  50.             bottom: 0;
  51.             margin: auto ;
  52.         }
  53.  
  54.     </style>
  55. </head>
  56.  
  57. <body>
  58.     <!-- 例如容器居中 -->
  59.     <h1>该方法适合已知需要居中元素的大小/若不确定则需要JS辅助</h1>
  60.     <div class="container-box">
  61.         <div class="container-seed container-base">方法一 利用margin负值回去 需要明确知道容器大小</div>
  62.     </div>
  63.     <div class="container-box">
  64.         <div class="container-seed2 container-base">利用transform 的translate 平移自身的的负值的50%  需要测试解除注释即可同时注释margin  该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小</div>
  65.     </div>
  66.     <div class="container-box">
  67.         <div class="container-seed3 container-base">利用absolute 的四个值为0  配合margin：auto ；即可</div>
  68.     </div>
  69. </body>
  70.  
  71. </html>

7.利用：after 伪类  + content 使无法确定大小图片居中

　　示例代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.      <title>垂直居中</title>
  8.      <meta name="viewport" content="width=device-width, initial-scale=1">
  9.      <style>
  10.          .pic-box {
  11.              background: pink;
  12.              font-size: 0 ;
  13.              text-align: center;
  14.              height: 600px;
  15.              width: 600px;
  16.          }
  17.  
  18.          img{
  19.              display: inline-block ;
  20.              vertical-align: middle ;
  21.          }
  22.  
  23.          .pic-box:before{
  24.              display: inline-block ;
  25.              content: '' ;
  26.              overflow: hidden;
  27.              vertical-align: middle ;
  28.              height: 100%;
  29.              width: 0 ;
  30.          }
  31.  
  32.      </style>
  33.  </head>
  34.  
  35.  <body>
  36.      <div class="pic-box">
  37.          <img src="https://img.alicdn.com/bao/uploaded/i1/742862115/O1CN01yjhiHd1RUiBD5i23h_!!742862115.jpg_300x300.jpg">
  38.      </div>
  39.  </body>
  40.  
  41.  </html>

　　

css 图片文字居中的更多相关文章

  1. css图片+文字浮动（文字包围效果）

    css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...

  2. css图片文字

    1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做  异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...

  3. css 图片文字垂直居中

    先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...

  4. CSS图片文字同行居中

    img{ display:inline-block; vertical-align:middle; }

  5. 关于css如何让图片文字居中的方法

    在将父级转换为单元格形式时,设置的相关属性  可以达到如下效果:

  6. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  7. css分割线 文字居中的7种实现方式

    最近开始研究前端,会不定期更新一些小块代码,写下自己的学习笔记,也希望能和大家一起进步! 1.单个标签实现分隔线: <html> <head lang="en"& ...

  8. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  9. css图片文字一排

    <div class="footer1"> <div class="vercital-head"></div><!-- ...

随机推荐

  1. php代码中pre的作用？？

  2. 2019.01.22 bzoj3875: [Ahoi2014&Jsoi2014]骑士游戏（spfa+dp）

    传送门 题意简述:nnn个怪物,对于编号为iii的怪物可以选择用aia_iai​代价将其分裂成另外的bib_ibi​个怪物或者用cic_ici​代价直接消灭它,现在问消灭编号为1的怪物用的最小代价. ...

  3. 微信小程序toast框的使用

    1.wx.showToast() 方法可以配置toast框的提示文字,消失的时间,显示的图标 wx.showToast({ title: '请链接网络', icon:"none", ...

  4. SQL常用增删改查

    转 http://www.cnblogs.com/daxueshan/p/6687521.html 1增 1.1[插入单行]insert [into] <表名> (列名) values ( ...

  5. js基础学习笔记（零七）

    indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...

  6. 模式PK：命令模式VS策略模式

    1.概述 命令模式和策略模式的类图确实很相似,只是命令模式多了一个接收者(Receiver)角色.它们虽然同为行为类模式,但是两者的区别还是很明显的.策略模式的意图是封装算法,它认为“算法”已经是一个 ...

  7. POJ2112 Optimal Milking

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 17811   Accepted: 6368 ...

  8. 如何更好地使用Java 8的Optional

    Java 8中的Optional<T> 是一个可以包含或不可以包含非空值的容器对象,在 Stream API中很多地方也都使用到了Optional. java中非常讨厌的一点就是nullp ...

  9. 响应式 和 移动 web

    移动web 教程:http://www.imooc.com/learn/494 iphone5 问题一:6401136的图片,能否在iphone5上完全显示? chrome下 iphone5:3205 ...

  10. js-实现双色球功能

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...