各种水平垂直居中

单行文本:

      水平居中:

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

相关文章

扫码关注云+社区