各种水平垂直居中

单行文本:

      水平居中:

 text-align:center

     垂直居中:

line-height=容器高度

多行文本:

文本设置<span>标签
  span{
                     display: table-cell;
                     vertical-align: middle;
                     text-align: center;
   }
父元素设置
                  display: table;

图片水平居中:

方法1:table法

     容器div设置
         display: table-cell;
         text-align: center;
         vertical-align: middle;
     div下的img 设置
         vertical-align: middle;

   背景发法(不利于动态图片的导入)

容器div设置
  background-size:200px 200px;
               background: url() center no-repeat

 div垂直居中:

 position定位 万能法
                自身:div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
        left: 50%;
        top:50%;
        margin: -100px 0 0 -100px;
        }     //  margin-left和margin-top 为负自身长度的一半

 div水平居中:

  margin:0 auto;

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

tkinter -- Canvas(1)

提供可以用来进行绘图的 Container,支持基本的几何元素,使用 Canvas 进行绘图时,所有的操作都是通过 Canvas,不是通过它的元素

772
来自专栏Java后端技术

让div等块级元素水平以及垂直居中的解决办法

  我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让d...

842
来自专栏一“技”之长

标签之美四——为网页添加绚丽多彩的图像 原

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/...

933
来自专栏从零开始的linux

mongodb分片

分别在三台机器上面创建 mkdir -pv /data/mongodb/mongos/log mkdir -pv /data/mongodb/config/{d...

4254
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title

其中包括Image属性(窗体图标)、BackColor属性(窗口标题栏背景色)、TextColor属性(窗口标题栏文本颜色)和TextAlign属性(窗体标题栏...

905
来自专栏知道一点点

echarts动态数据获取展示(地图,折线图)

8842
来自专栏木子昭的博客

css布局-实现左中右布局的5种方式

? <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

3518
来自专栏前端知识分享

第48天:垂直滚动条

781
来自专栏九彩拼盘的叨叨叨

元素的垂直居中的方法

773
来自专栏一个小程序员的成长笔记

Canvas 图形组合方式

/** * 图形组合 */ function initDemo5() { var canvas = document.getElementById(...

3626

扫码关注云+社区