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. Neural Network Basics

    在学习NLP之前还是要打好基础,第二部分就是神经网络基础. 知识点总结: 1.神经网络概要: 2. 神经网络表示: 第0层为输入层(input layer).隐藏层(hidden layer).输出层 ...

  2. 牛客训练四：Applese 涂颜色（费马小定理+快速幂）

    题目链接:传送门 思路: 考虑每一列有2种颜色,总共有n行,每一行的第一个格确定颜色,由于左右颜色不相同,后面的行就确定了. 所以总共有2^n中结果. 由于n太大,所以要用到费马小定理a^n%mod= ...

  3. Tomcat架构解析(四)-----Coyote、HTTP、AJP、HTTP2等协议

    Connector是Tomcat中非常重要的一个组成部分,说白了,就是如何从客户端获取到相应的请求信息.这部分主要包括的难点有这样几个部分: 1.客户端与服务端的协议 客户端与服务端的协议是多种多样的 ...

  4. 张奎师弟参与devexpress chartControl绘图--解决了devexpress的chartControl控件不能添加系列的问题

    using DevExpress.XtraCharts; using System; using System.Collections.Generic; using System.ComponentM ...

  5. TreeSet集合为什么要实现Comparable？

    首先,让我们来看看JDK中TreeSet类的add方法 /** * Adds the specified element to this set if it is not already presen ...

  6. idea常用插件介绍

    常用插件 mybatis mapper 选择plugins,搜索mybatis plugin 激活教程 使用 插件的使用

  7. 我们学习Java今后的发展前景

      Java应用的前景   Java技术自1995年问世以来,在我国的应用和开发也得到了迅速普及,总体来看,这 些应用主要集中于企业应用开发.据有关单位调查显示,从开发领域的分布情况上看Web 开发占 ...

  8. C/C++ 打开串口和关闭串口

    通常使用下列函数来通过Win系统来对外围设备进行通信处理: 0. 前言 做串口方面的程序,使用CreateFile打开串口通信端口.在对串口操作之前,需要首先打开串口.使用C++进行串口编程,如果采用 ...

  9. 6.关键字static

    在java中并不存在全局变量的概念,但是我们可以通过static关键字来实现一个“为全局”的概念,在java中static表示“全局”和“静态”的意思,他可以用来修饰成员变量和方法,也可以用来修饰代码 ...

  10. shell wc -l

    shell 命令之 wc -l 给出一个比较常用的命令: cat * | wc -l 查询当前文件夹下的文件的总行数. 原理就是统计了文件中换行符的数量.