php中文字怎么上下居中,CSS怎么设置垂直居中?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方。本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一:css如何设置文本文字垂直居中
1、line-height 使文字垂直居中
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
效果图:
这样就能让div中的文字水平垂直居中了
2、CSS3的flex布局 使文字垂直居中
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
效果图:
二:css如何设置div盒子容器(块状元素)垂直居中
1.使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)
如果我们知道元素的高度,可以这样来实现垂直居中:
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
效果图:
这个方法兼容性不错,但是有一个小缺点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。
2. 使用绝对定位和transform(未知元素高度)
如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transform 的 translate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中:
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
效果图:
这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了,因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
3. 绝对定位结合margin: auto
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
效果图:
这种方法需要先 把要垂直居中的元素相对于父元素绝对定位,top和bottom设为相等的值,不管设置成多少值,只要两者相等就行;然后再将要居中元素的margin设为auto,这样便可以实现垂直居中了。被居中元素的宽高也可以不设置,但不设置的话就必须是图片这种自身就包含尺寸的元素,否则无法实现。
4. 使用padding实现子元素的垂直居中
css 垂直居中
.box{
width: 300px;
background: #ddd;
padding: 100px 0;
}
.child{
width: 200px;
height: 100px;
background: orange;
line-height: 100px;
}
效果图:
这种实现方式非常简单,就是给父元素设置相等的上下内边距,则子元素自然是垂直居中的,当然这时候父元素是不能设置高度的,要让它自动被填充起来,除非设置了一个正好等于上内边距+子元素高度+下内边距的值,否则无法精确的垂直居中。这种方式看似没有什么技术含量,但其实在某些场景下也是非常好用的。
5. 使用flex布局
css 垂直居中
.box{
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
效果图:
关于flex布局(弹性布局/伸缩布局)里门道颇多,这里先针对用到的东西简单说一下:
flex也就是flexible,意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器,指定好了容器之后再为其添加align-items属性,该属性定义项目在交叉轴(这里是纵向轴)上的对齐方式,可能的取值有五个,分别如下:
flex-start::交叉轴的起点对齐;
flex-end:交叉轴的终点对齐;
center:交叉轴的中点对齐;
baseline:项目第一行文字的基线对齐;
stretch(该值是默认值):如果项目没有设置高度或者设为了auto,那么将占满整个容器的高度。
php中文字怎么上下居中,CSS怎么设置垂直居中?相关推荐
- html中文字描边效果代码,css如何设置文字描边效果?
想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性. 方法1:使用text-shadow属性 text-shadow属性用于向文本添加字体边框 ...
- 将php中文字设为黑体,css怎么设置黑体
css设置黑体的方法:可以利用font-family属性来进行设置,如[font-family: 黑体;].font-family属性用来指定一个元素的字体. 本文操作环境:windows10系统.c ...
- 在html中字怎么修改位置,css怎么设置字体位置?
css怎么设置字体位置?下面本篇文章给大家介绍一下使用CSS设置字体位置的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 方法1:使用text-align属性设置字体的位置 t ...
- html中斜体样式怎么写,css如何设置字体为倾斜样式?
css如何设置字体为倾斜样式?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以通过设置font-style属性的值为italic(斜体 ...
- html 文字段后间距,css怎么设置段前段后的距离?
在网页中文章段落一般我们用html 标签进行分段,可以在css样式表中设置 标签的段前后间距.下面本篇文章来给大家介绍一下使用css怎么设置段前段后的距离? 一.line-height行高 我们对li ...
- html laber上下居中,CSS未知高度垂直居中的实现
本文主要介绍了CSS未知高度垂直居中的实现,分享给大家,具体如下: CSS垂直居中 .container{ width:500px;/*装饰*/ height:500px; background:#B ...
- div中文字,图片居中对齐,兼容FF、IE
2010年07月21日 星期三 20:11 垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用.假设你将一个导航菜单的高度设 ...
- 如何使html中的din居中,CSS 实现完美垂直居中
<?xml version="1.0" encoding="utf-8"?>ttp://www.w3.org/TR/xhtml1/DTD/xhtml ...
- android textview改变部分文字的颜色和string.xml中文字的替换及部分内容设置颜色、字体、超链接、图片...
一:TextView组件改变部分文字的颜色: 1.TextView textView = (TextView)findViewById(R.id.textview); 2. 3.//方法一: 4.te ...
最新文章
- 如何构建优质的推荐系统服务?| 技术头条
- matlab 显示多为,求助!!如何把多输入多输出系统的传函转换为状态空间表达式?...
- c语言ungetc参数,关于一些C语言标准I/O函数的见解。int ungetc(int ch,FILE *fp)函数...
- Spartacus同SAP Commerce Cloud交互的示意图
- python 数据分析找到老外最喜欢的中国美食【完整代码】
- λ演算的语法和语义_λ和副作用
- ETH联合Meta和鲁汶大学 提出视频恢复算法VRT,在视频超分辨率、去模糊和去噪性能达到SOTA...
- SQL 一次插入多条记录
- Super expression must either be null or a function, not undefined
- 关于计算机编程语言 国外网友妙语录
- 基于java(springboot)餐厅点餐系统源码成品(java毕业设计)
- 关于黑苹果安装10.14 屏幕只显示部分区域且区域过小问题的解决方法(i7-6700+AMD vega56+微星MS-7996)
- 姿态角解算(MPU6050 加速度计加陀螺仪)
- 1959年第一台电子计算机,1、 一般认为,世界上第一台电子数字计算机诞生于______。 A.1946年 B.1952年 C.1959年 D.1962年...
- Unity-音频播放
- 有人晒出程序员聚餐照片,网友:根据头发量能看出技术水平高低!
- 常用汉字unicode编码
- 删除桌面上文件,提示此文件位置不在当前位置?
- AIX 学习笔记之 存储管理 LV PV VG PP
- CCF-CSP 202112-3登机牌条码 解题思路+满分题解+详细注释