css实现垂直水平居中的方法
2023-09-27 14:26:39 时间
html结构:
<div class="box"> <div>垂直居中</div> </div>
方法1:display:flex
.box{ display: flex; justify-content:center; align-items:Center; }
方法2:绝对定位和负边距
.box{position:relative;} .box div{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px; margin-top:-25px; text-align: center; }
方法3:translate
.box childdiv{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; }
方法4:table-cell
.box{ display: table-cell; vertical-align: middle; text-align: center; }
方法5:偏移量0+margin:auto
父元素设置相对或绝对定位;要居中的子元素设置绝对定位,所有偏移量为0,外边距为auto:
.wrap{ positon:relative; } .center{ positon:absolute; top:0;bottom:0;left:0;right:0; margin:auto; }
相关文章
- CSS创建三角形(小三角)的几种方法
- 插入css样式表的三种方法
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- EF Core使用SQL调用返回其他类型的查询 ASP.NET Core 2.0 使用NLog实现日志记录 CSS 3D transforms cSharp:use Activator.CreateInstance with an Interface? SqlHelper DBHelper C# Thread.Abort方法真的让线程停止了吗? 注意!你的Thread.Abort方法真
- Asp.Net(IIS)运行后出现“.dll拒绝访问”错误的解决方法(已解决)
- 在Html中引入CSS的方法
- OpenCV imwrite无损保存图像及解决保存图像为黑屏的方法
- 雪碧图的使用方法&css实现矢量小三角
- CSS背景background相关属性使用方法:
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——1.2 HTML文件的编写方法
- ubuntu apt-get update连不上dl.google.com解决方法
- Appium脚本(5) 元素等待方法示例
- Web 性能优化:21 种优化 CSS 和加快网站速度的方法
- CSS多种方法实现分隔线
- HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结
- jQuery CSS方法