1.单行文字居中

2.多行文字居中

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>display:table-cell;垂直居中</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <style>

         .pic-box {

             display: table-cell ;

             background: pink;

             font-size: 0 ;

             text-align: center;

             height: 600px;

             width: 600px;

             vertical-align: middle ;

         }

         img{

             display: inline-block ;

         }

     </style>

 </head>

 <body>

     <div class="pic-box">

         <img src="https://img.alicdn.com/bao/uploaded/i1/742862115/O1CN01yjhiHd1RUiBD5i23h_!!742862115.jpg_300x300.jpg">

     </div>

 </body>

 </html>

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

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

　　示例代码

<!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" content="ie=edge">

    <title>absolute居中</title>

    <style>

        .container-box {

            background: green;

            position: relative;

            width: 600px;

            height: 800px;

            margin: 20px;

        }

        .container-base{

            height: 200px;

            width: 200px;

            position: absolute;

        }

        .container-seed {

            background: pink;

            /*

                先将距离顶部和左边的距离都设置成50%

                再减去需要居中容器本身的一半值居中 即下方的margin 或 transform 负值回去

             */

            top: 50%;

            left: 50%;

            /* 方法一 利用margin负值回去 需要明确知道容器大小 */

            margin: -100px 0 0 -100px;

        }

        .container-seed2 {

            background: white;

            top: 50%;

            left: 50%;

            /* 方法二 利用transform 的translate 平移自身的的负值的50%  需要测试解除注释即可同时注释margin  该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小*/

            transform: translate(-50%, -50%);

        }

        .container-seed3 {

            background: #a4c2eb;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto ;

        }

    </style>

</head>

<body>

    <!-- 例如容器居中 -->

    <h1>该方法适合已知需要居中元素的大小/若不确定则需要JS辅助</h1>

    <div class="container-box">

        <div class="container-seed container-base">方法一 利用margin负值回去 需要明确知道容器大小</div>

    </div>

    <div class="container-box">

        <div class="container-seed2 container-base">利用transform 的translate 平移自身的的负值的50%  需要测试解除注释即可同时注释margin  该属性需在IE9+使用,优势在于该方法不需要明确知道居中元素的大小</div>

    </div>

    <div class="container-box">

        <div class="container-seed3 container-base">利用absolute 的四个值为0  配合margin：auto ；即可</div>

    </div>

</body>

</html>

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

　　示例代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>垂直居中</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <style>

         .pic-box {

             background: pink;

             font-size: 0 ;

             text-align: center;

             height: 600px;

             width: 600px;

         }

         img{

             display: inline-block ;

             vertical-align: middle ;

         }

         .pic-box:before{

             display: inline-block ;

             content: '' ;

             overflow: hidden;

             vertical-align: middle ;

             height: 100%;

             width: 0 ;

         }

     </style>

 </head>

 <body>

     <div class="pic-box">

         <img src="https://img.alicdn.com/bao/uploaded/i1/742862115/O1CN01yjhiHd1RUiBD5i23h_!!742862115.jpg_300x300.jpg">

     </div>

 </body>

 </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. 2018.12.17 ural1132 Square Root（二次剩余）

    传送门 MD写一道二次剩余的板题差点写自闭了. 我用的是cipollacipollacipolla算法. 利用的是欧拉准则来找寻一个二次非剩余类来求根. 注意这题有两个等根和模数为2的情况. 代码: ...

  2. 2018.11.01 bzoj4872: [Shoi2017]分手是祝愿（期望dp）

    传送门 一道不错的题. 考虑n==kn==kn==k的时候怎么做. 显然应该从nnn到111如果灯是开着的就把它关掉这样是最优的. 不然如果乱关的话会互相影响肯定不如这种优. 于是就可以定义状态f[i ...

  3. springboot 增加过滤器方法

    在访问服务器时,我们需要控制用户是否允许权限,这个时候可以使用过滤器. 在springboot 配置过滤器的方法如下: 编写过滤器代码: package com.neo.filter; import ...

  4. activemq部署

    系统环境 IP salt-master-1:192.168.0.156 salt-master-2:192.168.0.157 node-test-1:192.168.0.158 node-test- ...

  5. IntelliJ IDEA 2017版 SpringBoot测试类编写

    SpringBoot的测试类编写Demo 源码见 https://github.com/liushaoye/baseone.git

  6. 2.3.1关键字volatile与死循环

    关键字volatile的主要作用是使变量在多个线程间可见. 测试如下 package com.cky.test; /** * Created by edison on 2017/12/9. */ pu ...

  7. Ng第十二课：支持向量机(Support Vector Machines)（二）

    7 核函数(Kernels) 最初在“线性回归”中提出的问题,特征是房子的面积x,结果y是房子的价格.假设从样本点的分布中看到x和y符合3次曲线,那么我们希望使用x的三次多项式来逼近这些样本点.那么首 ...

  8. C++指针一

    指针也是变量,占有内存空间,用来保存内存地址. 指针也是一种数据类型,指针是一种数据类型,是指它所致内存空间的数据类型. 指针变量和它指向的内存块是两个不同的概念 *p操作内存 在指针声明时,*号表示 ...

  9. （贪心 or DP）Woodcutters -- Codefor 545C

    http://codeforces.com/contest/545/problem/C  Woodcutters time limit per test 1 second memory limit p ...

  10. java基础知识-新手上路注意事项一

    1.文件名,类名,字节码文件名三者的关系 源文件名:Demo.java 类名:Demo 字节码文件名:Demo.class 2.如果class定义前,加上public修饰,说明这是一个公共类,此时类名 ...