博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS定位元素居中显示
阅读量:7227 次
发布时间:2019-06-29

本文共 1003 字,大约阅读时间需要 3 分钟。

hot3.png

1、利用margin

div {

    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
分析:

top: 50%; left: 50%;让元素的左上在父元素中垂直水平居中

margin-top: -50px; margin-left: -50px;让元素向上向右偏移自身一半的距离
2、利用translate

div {

    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
分析:

top: 50%; left: 50%;让元素的左上在父元素中垂直水平居中

transform: translate(-50%, -50%);让元素向上向右移动自身一半的距离
3、四个方位全部为0,用margin定位

div {

    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right : 0;
    margin: auto;
}
分析:

四个方位全部为0时,相互抵消,盒子会在初始位置显示

margin: auto;让盒子垂直水平居中

 <div class="bottom_soft_link">

<a target="_blank" class="bottom_soft_link_ios" href="xxx.com" title="客户端苹果手机APP下载">iOS下载</a>
<a target="_blank" class="bottom_soft_link_ios" href="http://jinan.changtu.com/" title="济南长途汽车总站电话">济南长途汽车总站电话</a>
</div>

转载于:https://my.oschina.net/u/3042303/blog/823494

你可能感兴趣的文章
析构方法、克隆对象
查看>>
Python字符编码详解
查看>>
Android开发 Firebase动态链接打开APP
查看>>
基于 HTML5 Canvas 的 3D 模型贴图问题
查看>>
让技术不要成为“背锅侠”!
查看>>
dubbo源码分析系列——dubbo的SPI机制源码分析
查看>>
表格单元格td设置宽度无效的解决办法
查看>>
防止视频资源被下载
查看>>
都是并发惹的祸
查看>>
eclipse实现JavaWeb项目 增量打包
查看>>
面试题系列一之 程序生命周期
查看>>
设计模式——观察者模式:气象监测应用
查看>>
NSUserDefaults简介及如何使用 NSUserDefaults 存储自定义对象
查看>>
IntelliJ IDEA搭建SpringBoot
查看>>
深入浅出iOS事件机制
查看>>
hadoop理解
查看>>
Oracle——18用户、角色和权限信息的视图总结
查看>>
WordPress 中的 Debug 模式(调试模式)
查看>>
node下使用express框架,ejs模板引擎
查看>>
搜索:文本的匹配算法
查看>>