CSS 中的各种居中 (水平、垂直)
导读:
CSS
的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中。根据父、子元素的高度是否清楚,又会使得不同的居中用不同方法。本文就其中一些情况做下简单说明,以作笔记之用,仅供大家参考。
1、文本居中
先上示例中的结构:
<!-- html 结构 -->
<div class="parent"><span class="child">some text</span>
</div>
<!-- 以便查看效果添加如下样式 -->
.parent {border: 1px solid #000;
}
.child {
}
1-1、水平居中
文本在元素内居中对齐,可以使用 text-align: center;
。因为 text-align
属性是会被继承的,所以写在父元素或者子元素上都可以实现居中,这里我们对父元素进行设置:
.parent {text-align: center;
}
1-2、垂直居中
1-2-1、文本在元素内垂直对齐,可以使用设置 line-height
的值为包含元素的高度,所以这里我们需要设置父元素的高度。line-height
属性同样会被继承,这里我们对子元素进行设置:
.parent {height: 60px;
}
.child {line-height: 60px;
}
1-2-2、也可以对父元素使用 padding
进行居中,:
.parent {padding: 30px 0;
}
1-3、水平垂直居中
1-3-1、如果要水平和垂直都居中,可以使用 line-height
和 text-align: center;
。
.parent {text-align: center;height: 60px;line-height: 60px;
}
1-3-2、也可以使用 padding
和 text-align: center;
。
.parent {text-align: center;padding: 30px 0;
}
自然直接使用 padding: 30px;
也可以实现水平垂直居中。
2、块元素居中
同样先上示例中的结构:
<!-- html 结构 -->
<div class="parent"><div class="child"></div>
</div>
<!-- 以便查看效果添加如下样式 -->
<!-- 如果实例中没有指明需要知道父、子元素的高度或宽度则对应方法对此不作要求 -->
.parent {height: 80px;border: 1px solid #000;
}
.child {height: 40px;width: 80%;background-color:#c0c0c0;
}
2-1、水平居中
2-1-1、要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
。
.child {margin: 0 auto;width:80%;
}
注意:该方法必须设置子元素的 width 属性(且不能为100%)。
2-1-2、在父元素中设置 text-align: center;
,子元素中设置 display: inline-block;*zoom:1;
。
.parent {text-align: center;
}
.child {display: inline-block;*zoom:1; /* 兼容 IE6、7 */
}
2-1-3、在子元素中设置 display:table;margin: 0 auto;
。
.child {display: inline-block;*zoom:1; /* 兼容 IE6、7 */
}
2-1-4、absolute
配合 transform
。
.parent {position: relative;
}
.child {position: absolute;left: 50%;transform: translateX(-50%);
}
2-1-5、强大的 flex
布局中的 justify-content: center;
。
.parent {display: flex;justify-content: center;
}
2-2垂直居中
2-2-1、对父元素设置 display: table-cell;vertical-align:middle;
。
.parent {display: table-cell;width:100px; /* 对table-cell元素设置百分比(如100%)的宽高值时无效的,所以我们需要这样设置 *//* 但是可以将父元素设置display:table,再将父元素设置百分比宽高 *//* 子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中 *//* 此处为不破坏文章结构,实例采用并非上面展示的 width:100px; 而是第二种方法 */vertical-align:middle;
}
2-2-2、absolute
配合 transform
。
.parent {position: relative;
}
.child {position: absolute;top: 50%;transform: translateY(-50%);
}
2-2-3、强大的 flex
布局中的 align-items: center;
。
.parent {display: flex;align-items: center;
}
2-3、完美居中(水平+垂直)
2-3-1、absolute
配合 transform
。
.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
2-3-2、强大的 flex布局
。
.parent {display: flex;justify-content: center;align-items: center;
}
写在最后
实现居中的方法还有许多,根据不同的情况也会有不同的处理方式,本文只是简单的记录了其中一些,且涉及到一些兼容性并没有提及,学习需谨慎,若是文中有什么错误,欢迎指正。
转载于:https://www.cnblogs.com/anani/p/8611859.html
CSS 中的各种居中 (水平、垂直)相关推荐
- 【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录 一.问题提出 二.绝对定位 居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值 三.绝对定位元素 水平 / 垂直 居中 一.问题提出 绝对定位 不能通过 设置 margin: auto ...
- html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
- CSS基础学习--17 布局 - 水平 垂直对齐
一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
- android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
- 如何用css实现一个盒子的水平垂直方向的居中
1)先将元素通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素的中心点到页面的中心.该方法需要考虑浏览器兼容问题 .parent { position: ...
- CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...
- html表格整体居中对齐,css中表格如何居中对齐?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 下面我们来看一下 ...
- html中div居中的代码怎么写,CSS中让DIV居中的代码
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
- 如何使html中的din居中,HTML+CSS--position大法好
其实在HTML和CSS的学习中,css的position属性应该是难点之一,难在你需要静下心来仔细搞清楚它的每一个值的意义.效果和用法.但是它的功能很强大,效果也是很令人惊艳的,因为你可以用它去实现一 ...
最新文章
- 可可:框架和边界之间有什么区别?
- 合并两个无序数组java_Java实现十大排序算法(上)
- 2020年终总结一下吧
- php stmp 授权码问题,PHPmailer 使用网易126发送邮件的问题
- php的select case语句,调用不同SELECT语句的MySQL IF / CASE语法
- 别整那些花里胡哨的,女孩子喜欢简单直接的男生
- 【转载】Tomcat内存溢出的原因及调试
- Atitit 财政学概论 attilax学习笔记
- java飞机大战微信版_微信飞机大战素材
- 体育生学编程——html学习
- MBR陶瓷膜原料,MBR陶瓷膜堵塞了怎么清理-世来福
- 多元函数的泰勒展开(Taylor series expansion)
- 单片机低功耗配置及注意事项
- 领悟《信号与系统》之 信号与系统的描述-下节
- ofo千万人排队退超10亿元押金,被资本和市场抛弃的ofo如何熬过寒冬?
- 手机号号段,正则,校验
- 【气象数值模式及其数据处理】WRF模式与Python融合
- I'm a Mac:雄狮训练手册
- 开发转测试:从0开始的6年自动化之路...
- 输入一个正整数n,再输入n个学生的姓名和百分制成绩,将其转换为两级制成绩后输出。要求定义和调用函数set_grade(stu, n),其功能是根据结构数组stu中存放的学生的百分制成绩score,将其
热门文章
- android JNI层线程回调Java函数
- git 简易指南+常用命令
- Android数据库高手秘籍(一)——SQLite命令
- DotNetTextBox V2.0 Web Control(ASP.NET2.0 增强型TextBox控件,完全支持AJAX.NET)
- redis 相关操作
- Eclipse输入Java和XML代码自动提示功能最简单的方法
- 关键字—final static const的区别
- TCP协议可靠性保证(确认应答机制,超时重传机制,流量控制,拥塞窗口)
- 记一次 javax.xml.soap.SOAPException:
- 《selenium2 python 自动化测试实战》(15)——调用js控制滚动条等操作