Day14:CSS垂直居中
CSS 居中 垂直
2023-09-11 14:16:52 时间
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
相关文章
- CSS动画实例:Loading加载动画效果(二)
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- 不可思议的纯CSS导航栏下划线跟随效果
- 【Cssflex】css中关于弹性布局flex的综合用法(示例展示)
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- CSS - 利用 vertical-align:middle 垂直居中元素容器
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- css未知大小的图片居中
- css 按钮凹陷的感觉
- css CSS常见布局解决方案
- 常用CSS垂直居中方案
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
- 浅析如何给css加上模块的功能以及CSS Modules用法介绍
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- 纯CSS实现多行文字垂直居中几种方法解析
- css,图片和文字在父元素垂直居中,且图片和文字在中线对齐排列的几种方式
- CSS学习知识整理(六)Css position(定位)、margin 简写
- 上下居中css
- CSS实现垂直水平居中