技术经验分享: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月前
|
移动开发 前端开发 HTML5
技术经验解读:关于前端的margin
技术经验解读:关于前端的margin
45 0
|
5月前
|
JSON 定位技术 开发工具
技术经验解读:一步步实现仿制AndroidLOL多玩盒子(一)概览
技术经验解读:一步步实现仿制AndroidLOL多玩盒子(一)概览
34 0
|
6月前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
68 1
|
前端开发
前端学习案例3-flex重难点3
前端学习案例3-flex重难点3
60 0
前端学习案例3-flex重难点3
|
前端开发
前端学习案例2-flex重难点2
前端学习案例2-flex重难点2
66 0
前端学习案例2-flex重难点2
|
前端开发
前端学习案例1-flex重难点
前端学习案例1-flex重难点
77 0
前端学习案例1-flex重难点
|
前端开发
前端学习案例1-圣杯布局1
前端学习案例1-圣杯布局1
78 0
前端学习案例1-圣杯布局1
|
前端开发 容器
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
642 6
🍊Flex布局最佳实践之骰子实战篇(面试高频考点,速来围观呀~)
|
前端开发
前端知识学习案例1-盒子模型1
前端知识学习案例1-盒子模型1
54 0
前端知识学习案例1-盒子模型1
|
前端开发
前端知识学习案例2-盒子模型2
前端知识学习案例2-盒子模型2
42 0
前端知识学习案例2-盒子模型2
下一篇
无影云桌面