各种水平垂直居中

单行文本:

      水平居中:

 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 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

791
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏增长技术

App Guide相关

##TourGuide https://github.com/worker8/TourGuide

702
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

7625
来自专栏码匠的流水账

spring security reactive获取security context

本文主要研究下reactive模式下的spring security context的获取。

1812
来自专栏跟着阿笨一起玩NET

c# 使用timer定时器操作,上次定时到了以后,下次还未执行完怎么处理

------解决方案-------------------------------------------------------- 开始的时候,禁用定时器,你...

2701
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2199
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1541
来自专栏Golang语言社区

Knapsack problem algorithms for my real-life carry-on knapsack

I'm a nomad and live out of one carry-on bag. This means that the total weight o...

1142
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2382

扫码关注云+社区