时间:2022-11-17 浏览量: 收藏
css代码居中的方法:
1、定位法【position:absolute】;
如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。
<style> div{ position: absolute;/* 或者使用fixed */ top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; width: 300px; height: 200px; background-color: #f00; } </style> <body> <div> </div> </body>
2、使用【margin:auto】法;
这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto。
<style> div{ position: absolute;/* 或者使用fixed */ top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 300px; height: 200px; background-color: #f00; } </style> <body> <div> </div> </body>
3、使用【display:table-cell】法;
这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。
<style> div{ display: table-cell; vertical-align: middle; text-align: center; width: 300px; height: 200px; background-color: #f00; margin: auto; } p{ display: inline-block; vertical-align: middle; width: 150px; height: 100px; border: 1px solid #ccc; color: #fff; } </style> <body> <div> <p>多行文字内容,居中设置效果</p> </div> </body>
4、使用【transform:translate(x,y)】法。
这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。
<style> div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> <body> <div>transform:translate(x,y)方法,绝对居中效果</div> </body>
RELATED RECOMMEND
2022-11-17
返回网页顶部JS代码如下:// 滑动滚动条$(window).scroll(function(){ // 滚动条距离顶部的距离 大于 200px时 if($(window).scrollTop() >= 300){ $(".floatTop").fadeIn(1000); // 开始淡入 } else{ $(".fl
2022-11-17
NO.1 唯爱中国红(RGB:181 13 13 CMYK:37 100 100 3 #B50D0D)NO.2 莫兰迪绿(RGB:105 149 114 CMYK:65 32 62 0 #699572)NO.3 蒂芙尼蓝(RGB:0 227 226 CMYK:63 0 26 0 #00E3E2)NO.4 爱马仕橙(RGB:3 10 179 CMYK:100 92 4 0 #030A
2022-11-17
为贯彻落实《中华人民共和国反电信网络诈骗法》、《互联网信息服务管理办法》及《非经营性互联网信息服务备案管理办法》等法律法规要求,配合相关部门做好移动互联网信息服务管理,根据2023年8月4日工信部发布的《工业和信息化部关于开展移动互联网应用程序备案工作的通知》,微信公众平台ICP代备案管理系统将提供新增备案、变更备案、注销备案等服务,协助开发者完成微信小程序备案。现将备案相关事项通知如下:一、备案
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 闽公网安备 35020502000640号 网站地图 Sitemap
关键词聚合