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 ...
随机推荐
- Go语言基础之map
Go语言基础之map Go语言中提供的映射关系容器为map,其内部使用散列表(hash)实现. map map是一种无序的基于key-value的数据结构,Go语言中的map是引用类型,必须初始化才能 ...
- Python全栈-magedu-2018-笔记6
第三章 - Python 内置数据结构 bytes.bytearray Python3引入两个新类型 bytes 不可变字节序列 bytearray 字节数组 可变 bytes.bytearray 字 ...
- C++编程剖析 问题 方案 和设计准则
1.Set的每个对象为什么会有三个指针? STL中的set使用方法详细!!!! 因为其底层是红黑树实现的,每个节点有两个子节点和一个父节点,所以需要三个指针. Set 与 map的区别是什么? 总的来 ...
- python learning day01
python简介 一.python的由来: python的创始人是吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚 ...
- 创建一个vue单页面应用
最最开始是要安装cli3 1.npm install -g @vue/cli 2.npm install -g @vue/cli-service-global 然后是创建单页面应用si ...
- KMP初步
KMP算法专门用于处理字符串匹配问题. 开始学习的时候觉得很有道理,但是一些细节总觉得有些模糊,所以一直觉得懵懵懂懂.今天思考了一下,总结一下,希望对大家也有帮助. 朴素的字符串匹配算法就是一个一个字 ...
- VisualStudioCode创建的asp.net core控制台程序部署到linux
1.asp.net core控制台程序 static void Main(string[] args) { ; ) { Console.WriteLine("Hello World!&quo ...
- 6、jeecg 笔记之 自定义excel 模板导出（一）
1.前言 jeecg 中已经自带 excel 的导出导出功能,其所使用的是 easypoi,尽管所导出的 excel 能满足大部分需求, 但总是有需要用到自定义 excel 导出模板,下文所用到的皆是 ...
- java中使用JDBC的preparedStatement批处理数据的添加
在项目中我们偶尔可能会遇到批量向数据库中导入数据,如果批处理的情况较多的情况下可以使用spring batch,如果只是一个导入功能的话可以考虑使用jdbc的preparedStatement处理. ...
- httpclient方式调用接口
public class ToInterface { /** * post方式提交表单(模拟用户登录请求) */ public static void postForm() { // 创建默认的htt ...