最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS下水平居中和垂直居中例子
时间：2022-06-25 10:06:31 编辑：袖梨 来源：一聚教程网
在写CSS样式的时候，有时为了美观，会添加水平居中和垂直居中，这时候你有可能会遇到很棘手的问题，有些水平居中和垂直居中的属性添加上去完全没反应，下面给大家列举一些CSS水平居中和垂直居中的终极解决方案：
一、CSS的水平居中
css水平居中有大致有以下三种情况：
1.文本、图片等行内元素：
给父元素添加属性：text-align:center;
2.确定宽度的块级元素：
添加属性：margin-left:auto;margin-right:auto;
3.不确定宽度的块级元素：
有三种处理方法：
a.把块级元素display:inline;变成行内元素，然后使用text-align:center实现。
b.把块级元素包含在table里，然后对table添加属性margin-left:auto;margin-right:auto;
c.给父元素设置float，然后给父元素设置position:relative;left:50%，子元素设置position:relative;left:-50%。
二、CSS的垂直居中
css垂直居中也大致有三种情况：
1.父元素高度确定，单行文本：
可以设置line-hight值等于其高度值实现；
2.父元素高度确定的多行文本、图片：
两种处理方法：
a.将它们包含在table标签中，td标签默认拥有属性vertical-align:middle;
b.给父元素添加属性：display:table-cell;vertical-align:middle;
3.父元素高度不确定的文本、图片：
给父元素设置相同的上下内边距：padding-top:10px;padding-bottom:10px;
对于脑残的IE6/7可能还要单独的加hack，给父元素设置position:absolute;top:50%;给子元素设置position:relative;top:-50%;
相关文章
- 王者荣耀S38赛季有什么更新 12-25
- 王者荣耀S38赛季有什么更新 王者荣耀S38赛季更新内容介绍 12-25
- 世界之外12.25有什么更新 世界之外12月25日更新内容介绍 12-25
- 光遇12.25红石碎片在哪里 光遇12月25日红石碎片位置攻略 12-25
- 奇迹暖暖绚光引途第二天怎么玩 绚光引途day2庆祝之舞搭配攻略 12-25
- 无限暖暖拍照打卡位置在哪里 无限暖暖世界巡游位置全攻略 12-25