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 ...
随机推荐
- 2、vuex页面刷新数据不保留，解决方法（转）
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- Magic Pen 6
Problem Description In HIT, many people have a magic pen. Lilu0355 has a magic pen, darkgt has a mag ...
- css 图片置灰
.filterGray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(10 ...
- spring boot中jsp解析c标签方法
pro.xml中添加jstl标签 <dependency><groupId>javax.servlet</groupId><artifactId>jst ...
- android 自定义Button,抛弃写shape文件
标签: android 控件 自定义 2017年05月27日 17:52:13 611人阅读 评论(0) 收藏 举报 分类: 自定义View(2) 作者同类文章 X 版权声明:本文为博主原创文章 ...
- CSS---光标cursor设置、浮动布局与clear的关系
光标设置 {cursor:auto;}--光标根据需要自动变化. {cursor:crosshair;}--光标变成“+”. {cursor:pointer;}--光标变成手指模式. {cursor: ...
- jmeter数据库连接配置
一.实际试过的mysql配置 1.导入一个JDBC jar包(我是直接把jar包放在了jmeter的lib目录),包:mysql-connector-java-5.1.7-bin.jar 2.设置JD ...
- Oracle 基础概念
数据库是一系列物理文件的集合(数据文件,控制文件,联机日志,参数文件等) --查询当前数据库名:select name from v$database; 数据库实例是一组Oracle后台进程/线程以及 ...
- SaaS的先鋒：多合一讯息处理器
在Rocketbots,我们的使命是改善企业与客户之间的关係.全球有超过40亿个消息传递帐户,人们花在上线对话的时间比任何其他活动都多.这种转变,创造了一个更高效及贴身的沟通.随著消费者越来越多要求, ...
- 平安银行在开源技术选型上的思考和实践 RocketMQ
小结: 1. https://mp.weixin.qq.com/s/z_c5D8fvHaYvHSczm0nYFA 平安银行在开源技术选型上的思考和实践 平安银行·吴建峰 阿里巴巴中间件 3月7日 随着 ...