CSS——div垂直居中及div内文字垂直居中
最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。
一、div垂直居中的一些方法：
1.当height、width固定大小时，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
width: 300px;
height: 300px;
background: red;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行结果：
2.当height、width大小是百分比时，有如下三种方法可以实现：
法一：使用CSS3的transform属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
height: 30%;
width: 30%;
background: green; position: relative;
top: 50%;
transform: translateY(-50%);/* 元素往下位移自身高度50%的距离 */
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行效果：
法二：使用CSS3的弹性布局（flex）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
height: 100%;
width: 100%;
display: flex;/*设置为弹性容器*/
align-items: center; /*定义div1的元素垂直居中*/
justify-content: center; /*定义div1的里的元素水平居中*/
background: green;
}
.div2{
width: 50%;
height: 50%;
background: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
运行效果：
法三：绝对定位时的一种巧妙方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
height: 50%;
width: 50%;
background: red; position:absolute; /*这里必须是absolute绝对定位*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
运行效果：
二、div内文字相对div垂直居中的一些方法：
1.当height、width固定大小时，有如下两种方法可以实现：
法一：只要保证line-height和height相同，即可保证div内的文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
height: 100px;
line-height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="div1">我的文字1</div>
</body>
</html>
运行效果：
法二：利用table-cell实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
/*这里的宽和高必须固定*/
height: 500px;
width: 500px;
display:table-cell;
vertical-align: middle;
background: green;
}
</style>
</head>
<body>
<div class="div1">文字垂直居中</div>
</body>
</html>
运行效果：
2.当height、width是百分比大小时，上面的方法就不适用了，用如下方法：
法一：借鉴了CSS3的弹性布局（flex）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
html,body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.div1{
/*这里的宽和高必须固定*/
height: 50%;
width: 50%;
background: red;
display: flex;/*设置为弹性容器*/
align-items: center; /*定义div1的元素垂直居中*/
justify-content: center; /*定义div1的里的元素水平居中*/
}
.div2{
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">文字垂直居中</div>
</div>
</body>
</html>
运行效果：
----------------------------------分割线--------------------------------
以上就是我目前知道的一些方法，如果后期还有新的方法，我会及时更新，方便自己，也方便他人。
CSS——div垂直居中及div内文字垂直居中的更多相关文章
- 关于DIV内文字垂直居中的写法
最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...
- css实现行内文字垂直居中
之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- html框内文字垂直居中的方法
由于无法知道框内文字的高度,很难确定垂直空间的位置.vertical-align:middle仅对td元素有效,无论单行和多行均可实现垂直居中.
- 用CSS如何实现单行图片与文字垂直居中
图片样式为 以下为引用的内容:.style img{vertical-align:middle;.....} 如果STYLE中有其它如INPUT或其它内联元素可写成 以下为引用的内容:.style i ...
- div在固定高的文字垂直居中
<div style='display:table; height:100px;'> <div style='display:table-cell; vertical-align: ...
- React-Native组件之Text内文字垂直居中方案
style: { height: 100, textAlign: 'center', textAlignVertical: 'center', } 以上方法在Android上显示水平垂直居中, 但在I ...
- 解决Firefox下input button内文字垂直居中
众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写 ...
- css解决td单元格内文字溢出
<table>标签加样式:table-layout:fixed;(一定要加,否则下面定义的td的样式都不起作用了) <td>加样式:overflow:hidden;text-o ...
随机推荐
- dtFindNearestPolyQuery :: process
dtFindNearestPolyQuery :: process(const dtMeshTile* tile, dtPoly** polys, dtPolyRef* refs, int count ...
- windows创建定时任务执行python脚本
一.创建定时任务 \ [程序或脚本]文本框中填的是Python编译器的名称,一般就是python.exe, [起始于]文本框中填的是Python编译器的目录,上图中假设你的Python编译器的完整路径 ...
- 新装的centos怎样显示中文界面
默认的显示英文界面,即使各种配置中都选择的chinese也没用,默认显示的还是英文. 要在终端输入 vim ~/.bashrc 编辑本用户配置文件 打开后最后一行加入 export LANG=&quo ...
- jmeter 入门学习-通过代理录制测试脚本
通过jmeter代理录制脚本后,会产生大量的无用的请求,尽管在代理中已经过滤了一部分图片或者CSS.JS文件. 手动查看主要的请求:这里主要关注登陆请求,要确定有效的URL请求 删除除/Login.a ...
- Python读取xlsx翻译文案
首先安装Python,然后安装模块 //查找模块(非必须) pip search xlrd //安装模块 pip install xlrd 由于输出要是utf-8所以需要设置默认环境为utf-8 # ...
- 搭建ionic3-angular5 开发环境并打包成安卓apk包教程
安装node.js 搭建ionic3-angular5 开发环境,首先查看本地电脑是否安装node环境,打开终端,输入 命令: node -v 没有去安装nodejs 网址:http://nodej ...
- csv impor export with mysql
server-side:SELECT id,tutorialId,tutorialName,ucreatelink,structureVersion FROM base_courseINTO OUTF ...
- [Day18]集合框架Collection、迭代器、增强for循环以及泛型
1.集合 1.1集合-本身是一个存储的容器 集合类的基本接口是Collection接口,这个接口有两个基本方法 (1)boolean add(E element) 用于向集合中添加元素,如果添加元素确 ...
- nvwgf2umx.dll 显卡崩溃问题尝试修复
问题背景 游戏上线之后,搜集到的奔溃列表里面列表存在大量的显卡驱动异常崩溃,window在vista之后,将显卡驱动模型从Xpdm改为了WDDM. WDDM的说明详见百度百科,其中最主要的变更如下: ...
- Linux系统中存储设备的两种表示方法
转:https://blog.csdn.net/holybin/article/details/38637381 一.对于IDE接口的硬盘的两种表示方法: 1.IDE接口硬盘,对于整块硬盘的两种表示方 ...