技术经验分享: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
相关文章
|
5天前
|
程序员 开发者
接上篇! 2025 年是程序员黄金时代元年本文面向真正的程序员与开发者,从夯实基础到把握前沿机遇,给出超详细具体实施步骤,教你一步步进阶,万丈高楼平地起,一分耕耘一分收获-优雅草卓伊凡
接上篇! 2025 年是程序员黄金时代元年本文面向真正的程序员与开发者,从夯实基础到把握前沿机遇,给出超详细具体实施步骤,教你一步步进阶,万丈高楼平地起,一分耕耘一分收获-优雅草卓伊凡
28 1
接上篇! 2025 年是程序员黄金时代元年本文面向真正的程序员与开发者,从夯实基础到把握前沿机遇,给出超详细具体实施步骤,教你一步步进阶,万丈高楼平地起,一分耕耘一分收获-优雅草卓伊凡
|
9月前
|
前端开发
详细解读DIV居中的经典方法
详细解读DIV居中的经典方法
34 0
|
10月前
|
JavaScript 前端开发 Go
经典面试题目
经典面试题目
49 0
|
存储 设计模式 编译器
【C++从0到王者】第二十六站:一些经典的多态面试题
【C++从0到王者】第二十六站:一些经典的多态面试题
134 0
|
算法 编译器 C语言
46道嵌入式工程师相关的经典面试题
46道嵌入式工程师相关的经典面试题
250 1
|
前端开发 容器
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
711 6
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
|
前端开发 JavaScript
#yyds干货盘点# 前端歌谣的刷题之路-第二十三题-检测复杂数据类型
#yyds干货盘点# 前端歌谣的刷题之路-第二十三题-检测复杂数据类型
114 0
#yyds干货盘点# 前端歌谣的刷题之路-第二十三题-检测复杂数据类型
|
消息中间件 缓存 安全
蚂蚁金服一面:题解析十道经典面试
用到分布式事务嘛?为什么用这种方案,有其他方案嘛?
308 0
|
机器学习/深度学习 人工智能 算法
小白也能搭建深度模型,百度EasyDL的背后你知多少
部署深度学习服务非常困难,因此简单易用的图形化系统就显得极为重要。本文介绍了百度的图形化深度学习系统 EasyDL,用户可以不需要机器学习背景知识而搭建优秀的深度学习服务。本文重点讨论了 EasyDL 系统的技术模块与优势,它大量采用了迁移学习与自动模型搜索,并针对不同的定制化任务学习不同的深度模型。
391 0
小白也能搭建深度模型,百度EasyDL的背后你知多少
|
存储 缓存 运维
架构科普
  软件架构指软件系统的顶层结构;框架是面向编程或配置的半成品;组件是从技术维度上的复用;模块是从业务维度上职责的划分;系统是相互协同可运行的实体。   软件开发最本质的挑战有两个:复杂和变更,而软件的价值是保证业务的响应力,与之相对的是开发资源的有限,各种的软件开发方法论,也都是在研究有限的资源下,如何应对着两个挑战,寻找平衡点,实现业务目标。因为是在寻找平衡点,就说明是有取舍的,所以就没有所谓的银弹的存在。