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 ...
随机推荐
- linux学习：sed与awk与tr用法整理
流编辑器:sed 语法:sed [-hnV][-e<script>][-f<script文件>][文本文件] 参数: -e<script>或--expression ...
- js高级4
1.Date 类 getDate()返回一个月中的某一天 1-31 getDay() 返回一周中的某一天0-6 getFullyear()返回四位数的年份 getMonth()返回月份 比实际情况小 ...
- c#中string的一些基本用法
.string的Split方法的使用 这个例子就是通过制定的符号来将词组分开,Splite(分割的字符,分割的份数) using System; using System.Collections; p ...
- 壁虎书1 The Machine Learning Landscape
属性与特征: attribute: e.g., 'Mileage' feature: an attribute plus its value, e.g., 'Mileage = 15000' Note ...
- Linux下面使用命令如何运行.sh文件的两种解决办法
Linux下面用命令如何运行.sh文件的方法,有两种方法: 一.直接./加上文件名.sh,如运行hello.sh为./hello.sh[hello.sh必须有x权限] 二.直接sh 加上文件名.sh, ...
- TCP三次握手那些事
临近5月,春招和实习招聘逐渐进入尾声.本文主要讨论面试中经常提问的TCP连接的机制,附带一些扩展知识. 参加面试的时候,过半的面试官都会问TCP相关问题,而最常见的问题就是:讲一下TCP三次握手(四次 ...
- vuejs 70行代码实现便签功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ZD6转辙机
1.转辙机的分类? 2.ZD6转辙机的电源电压是多少? 3.ZD6转辙机的电路图是怎么样的? 经常看到的一些术语: DBJ,FBJ DCJ FCJ DBJ 定位表示继电器 FBJ 反位表示继电器 DC ...
- React.createClass和extends Component的区别
React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...
- vue深度监控数据改变，缓存数据到本地
项目效果图: var vm = new Vue({ el:'#app', data:{ students:[], }, watch:{ students:{ handler(){ localStora ...