Day14:CSS垂直居中
verticle-align:middle
vertical-align:middle实现css垂直居中是常用的方法，但是需要注意，vertical生效的前提是diaplay:inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css水平居中</title>
<style>
#out {
background: blue;
width: 600px;
height: 300px;
}
#in {
background: yellow;
width: 50%;
height: 50%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
</html>
display: flex实现
display:flex实现css垂直居中的方法是给父元素display: flex;而子元素align-self:center;
<style>
#out{
background: blue;
width: 600px;
height: 300px;
display: flex;
}
#in {
background: yellow;
width: 50%;
height: 50%;
align-self: center;
}
父元素display:flex
子元素align-self:center
伪元素:before实现CSS垂直居中
<style>
#out{
background:blue;
width: 600px;
height: 300px;
display: block;
}
#out:before{
content: '';
display:inline-block;
vertical-align:middle;
height:100%;
}
#in{
background: yellow;
width: 50%;
height: 50%;
display: inline-block;
vertical-align: middle;
}
</style>
display:table-cell实现css垂直居中
给父元素display:table,子元素display: table-cell的方式实现css垂直居中。
<style>
#out {
background: blue;
width: 600px;
height: 300px;
dispaly: table;
}
#in{
background: yellow;
width: 50%;
height: 50%;
display:table-cell;
vertical-align:middle;
}
</style>
隐藏节点实现CSS垂直居中
<style>
#out{
background: blue;
width: 600px;
height: 300px;
}
#hide{
width: 50%;
height: 25%;
}
隐藏节点的height为剩余高度的一半
#in {
background: yellow;
width: 50%;
height: 50%;
}
</style>
<body id="out">
<div id="hide"></div>
<div id="in"></div>
</body>
通过transform实现CSS垂直居中
<style>
#out {
background: blue;
width: 600px;
height: 300px;
}
#in{
background: yellow;
width: 50%;
height: 50%;
position: relative;
top: 50%;
transform: translateY(--50%);
}
</style>
line-height实现CSS垂直居中
<style>
#out {
background: blue;
width: 600px;
height: 300px;
}
#in {
width: 50%;
height: 50%;
line-height: 300px;
}
</style>
<body>
<div id="out">
<p id="in">css</p>
</div>
</body>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
Day14:CSS垂直居中的更多相关文章
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- python_way day14 CSS
python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 一.css作用域: 基本用法:style="样式" <body ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- CSS垂直居中完美有用实例
<!DOCTYPE HTML> <html> <head> <meta meta chars ...
- python_way day14 CSS，莫泰对话框
python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 四.莫泰对话框: 一.css作用域: 基本用法:style="样式" ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- css 垂直居中技巧
CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...
随机推荐
- idea多级目录不展开的问题
遇见了一个坑,idea新建的包,和它的上级包重叠在了一起,无法形成树状结构 原因呢,还是因为自己的不细心了,解决方案很简单,下面的是原情况 解决方案,点击左侧栏右上角的设置图表,注意看红框内 把第一行 ...
- C#精粹--协变和逆变
概念 协变和逆变来源于类型和类型之间的绑定,C#4.0开始在泛型的接口和委托上支持协变和逆变,不过在这个版本之前的委托也是支持协变和逆变的.比如数组就支持协变,但是这不是一个好的特性,这C#初期版本从 ...
- 大型三甲HIS系统最新C#源码医院信息管理系统NET源码门诊住院医嘱药房药库发药管理源码
查看医疗信息管理his系统演示 本云his系统源码,适用在县乡一体化,医联体分级诊疗项目上,本源码开发语言asp.net c#,数据库sqlserver2012,开发工具vs2015.技术框架mvc. ...
- csrf 功能 及 csrf装饰器使用
目录 csrf 功能 及 csrf装饰器使用 简单了解csrf 防范措施 了解更多csrf点击 django 中 csrf csrf装饰器 csrf功能(执行流程) csrf 功能 及 csrf装饰器 ...
- Mysql 一些命令记录
查看数据库当前的状态 show processlist; 查询表索引的基数 show index from LoadingPlan; 重新统计表格的索引基数 analyze table Loading ...
- Python简单实现在线更新下载
Python简单实现 软件在线更新 在线下载(Python simple implementation of software online update and download) 文章来自:htt ...
- Linux Shell 小数比较
#!/bin/bash #######expr 方法是错误的,在比较相同位数时可以,当位数不同就会出错,如100.00>70.00就会得出错误的结果 a=123b=123c=99.99rat=` ...
- Debian9.5系统安装
1.镜像下载地址 http://cdimage.debian.org/cdimage/archive/ 2.开始安装 如果有配置网络地址,可以手动配置或者跳过等系统安装好后配置. 至此debian9 ...
- POST请求接口实列
通过响应状态来判断是否读取数据与抛出异常,然后通过判断获取的字节数去读取数据或抛出异常 /** * 发送HttpPost请求 * @param strURL * 服务地址 * @param param ...
- PAT-2019年冬季考试-乙级（题解）
很荣幸这次能够参加乙级考试,和大佬们同台竞技了一次,这篇博客,进行介绍这次2019冬季的乙级考试题解. 7-1 2019数列 (15分) 把 2019 各个数位上的数字 2.0.1.9 作为一个数列的 ...