CSS 居中方法总结-阿里云开发者社区

开发者社区> thomas.lin> 正文

CSS 居中方法总结

简介:
+关注继续查看

文字水平和垂直居中

     <div class="textAlignCenter">
        <span>居中</span>
      </div>
     .textAlignCenter{
          text-align: center;
        }

使用text-align可以实现块级元素内文本和图片水平居中,对于文字来说,可以设置line-height 来实现单行文字的垂直居中,但是对于多行文字来说,效果不好。所以可以通过table布局来实现多行文字垂直居中。

     <div class="textAlignCenter">
        <span>居中</span>
      </div>
     .textAlignCenter{
          text-align: center;
          display:table;
       }
      span{
        display:table-cell;
        vertical-align: middle;
      }

实现图片的水平垂直居中

1.通过vertical-align:middle实现垂直居中

  .textAlignCenter{
    width: 400px;
    height: 300px;
    text-align: center; //文字和图片的水平居中
    display: table-cell; //主要是这个元素和vertical-align 属性实现水平居中
    vertical-align: middle;
  }
  img{
    width:100px;
    height:100px;  
  }
    <div class="textAlignCenter">
        <img src="./img/1.pic.jpg"></img>
  </div>
  
  1. 采用背景法
<div class="img_bg"></div>
.img_bg{
    width: 400px;
    height: 300px;
    background: url(img.jpg) no-repeat center center;
}

水平且垂直居中

  1. 宽高固定的元素的水平垂直居中
    设定父级容器为相对定位的容器,设定子元素绝对定位的位置为顶部和左部50%,最后使用负向 margin 实现水平和垂直居中,margin 的值为宽高的一半。
.parent { position: relative; }
 .child { 
    width: 100px;
    height: 50px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -50px 0 0 -25px;
}
  1. 宽高不固定元素水平垂直居中

如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,但是需要使用 CSS3 属性 transform: translate(-50%, -50%) 实现水平垂直居中,但是该属性有兼容性问题,如下:
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。

.parent { position: relative; }
 .child { 
   position: absolute; 
   top: 50%; 
   left: 50%; 
    transform: translate(-50%, -50%); 
  }

如果不考虑浏览器兼容性问题,可以考虑使用flex属性,
使用 flexbox 实现水平和垂直居中,只需使用两条居中属性即可:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[转帖]ASP.NET 2.0中CSS失效的问题总结
ASP.NET 2.0中CSS失效的问题总结 经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下: 1,CSS文件路径不正确 这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了母版页里面,在内容页与母版页不在同一级目录下时会出现这样的问题。
637 0
总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg ...
667 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
web前端技能方法总结(css、js、jquery、html)(28)
web前端技能方法总结(css、js、jquery、html)
13 0
总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
705 0
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围...
768 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
+关注
9
文章
56
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载