技术经验分享:DIV居中的经典方法

简介: 技术经验分享:DIV居中的经典方法

"

1. 实现DIV水平居中

设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。

1 div{

2 Width</span>: 100px;

3 Height</span>: 100px;

4 margin: 0 auto;

5 }

缺点:需要设置div的宽度

2. //代码效果参考:https://v.youku.com/v_show/id_XNjQwMDQwNjkxMg==.html

实现DIV水平、垂直居中

要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDQxMTQ2MA==.html

50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。

1 div{

2 Width</span>: 100px;

3 Height</span>: 100px;

4 position: absolute;

5 left: 50%;

6 top: 50%;

7 margin: -50px 0 0 -50px;

8 }

缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

3. 文本在DIV中水平、垂直居中(text-align + line-height)

1)text-align 属性规定(块级)元素内文本的水平对齐方式。

2)line-height = height,行高等于元素高度,用来实现垂直居中。

1 div{

2 Width</span>:200px;Height</span>:200px; /设置div的大小/

3 border:1px solid green; /边框/

4 text-align: center; /文字水平居中对齐/

5 line-Height</span>: 200px; /设置文字行距等于div的高度/

6 overflow:hidden;

7 }


"
image.png
相关文章
|
存储 小程序 JavaScript
|
关系型数据库 MySQL
Mysql 主键冲突(ERROR 1062 (23000): Duplicate entry '1' for key 'PRIMARY')
Mysql 主键冲突(ERROR 1062 (23000): Duplicate entry '1' for key 'PRIMARY')
1703 0
|
IDE Java 测试技术
揭秘Java高效编程:测试与调试实战策略,让你代码质量飞跃,职场竞争力飙升!
【8月更文挑战第30天】在软件开发中,测试与调试对确保代码质量至关重要。本文通过对比单元测试、集成测试、调试技巧及静态代码分析,探讨了多种实用的Java测试与调试策略。JUnit和Mockito分别用于单元测试与集成测试,有助于提前发现错误并提高代码可维护性;Eclipse和IntelliJ IDEA内置调试器则能快速定位问题;Checkstyle和PMD等工具则通过静态代码分析发现潜在问题。综合运用这些策略,可显著提升代码质量,为项目成功打下坚实基础。
126 2
|
Web App开发 JavaScript 前端开发
谁说forEach不支持异步代码,只是你拿不到异步结果而已
JavaScript 的 `forEach` 不直接支持异步操作,但可以在回调中使用 `async/await`。虽然 `forEach` 不会等待 `await`,异步代码仍会执行。MDN 文档指出 `forEach` 预期同步回调。ECMAScript 规范和 V8 源码显示 `forEach` 基于 for 循环实现,不返回 Promise。通过 `setTimeout` 可观察到异步操作完成。与 `map` 不同,`forEach` 不适合处理异步序列,常需转换为 `Promise.all` 结合 `map` 的方式。
138 11
|
SQL XML IDE
Fluent Mybatis 牛逼!做到代码逻辑和sql逻辑的合一
Fluent Mybatis 牛逼!做到代码逻辑和sql逻辑的合一
414 0
Fluent Mybatis 牛逼!做到代码逻辑和sql逻辑的合一
【Groovy】MOP 元对象协议与元编程 ( 方法合成引入 | 类内部获取 HandleMetaClass )
【Groovy】MOP 元对象协议与元编程 ( 方法合成引入 | 类内部获取 HandleMetaClass )
205 0
【Groovy】MOP 元对象协议与元编程 ( 方法合成引入 | 类内部获取 HandleMetaClass )
|
Web App开发 Apache Windows
本地模拟服务器开发与交互——Apache服务器填坑之路(下载、安装、使用demo、卸载)
看《第一行代码》的时候,网络测试这一块需要下载一个Apache服务器,书上说百度上一找就够,下载之后一路next就好对吧。。。别想了,那个时代已经过去了唉,那现在要咋办,小伙伴不急,继续往下看。
1347 0
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。 愿力量与你同在_YC
1369 0

热门文章

最新文章