当前位置:网站首页>Seven ways to achieve vertical centering
Seven ways to achieve vertical centering
2022-07-05 11:58:00 【Xiongba is also】
If .parent Of height Don't write , You only need to padding: 10px 0; Will be able to .child Vertical center ;
If .parent Of height It's dead , It's hard to put .child In the middle , Here's how to center vertically .
advice : Can not write height Just don't write height.
1、table Built in features
Code
// html
<body>
<table class="parent">
<tr>
<td class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</td>
</tr>
</table>
</body>
.parent{
border: 1px solid red;
height: 600px;
}
.child{
border: 1px solid green;
}
design sketch
2、100% High after before add inline block
Code
// html
<body>
<div class="parent">
<span class=before></span><div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div><span class=after></span>
</div>
</body>
.parent{
border: 3px solid red;
height: 600px;
text-align: center;
}
.child{
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent .before{
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent .after{
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
design sketch
Optimized version
// html
<body>
<div class="parent">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</body>
.parent{
border: 3px solid red;
height: 600px;
text-align: center;
}
.child{
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent:before{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent:after{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
3、div Pretend to be table
Code
// html
<body>
<div class="table">
<div class="td">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</div>
</body>
// css div.table{
display: table;
border: 1px solid red;
height: 600px;
}
div.tr{
display: table-row;
border: 1px solid green;
}
div.td{
display: table-cell;
border: 1px solid blue;
vertical-align: middle;
}
.child{
border: 10px solid black;
}
design sketch
4、margin-top -50%
Code
// html
<body>
<div class="parent">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</body>
// css .parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
height: 100px;
margin-top: -50px;
}
design sketch
5、translate -50%
Code
// html
<body>
<div class="parent">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</body>
// css .parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
design sketch
6、absolute margin auto
Code
// html
<body>
<div class="parent">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</body>
// css .parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
width: 300px;
height: 200px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
design sketch
7、flex
Code
<!DOCTYPE html>
// html
<body>
<div class="parent">
<div class="child">
【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】【 Vertical center 】
</div>
</div>
</body>
// css .parent{
height: 600px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
border: 3px solid green;
width: 300px;
}
design sketch
边栏推荐
- C # implements WinForm DataGridView control to support overlay data binding
- 阻止瀏覽器後退操作
- The most comprehensive new database in the whole network, multidimensional table platform inventory note, flowus, airtable, seatable, Vig table Vika, flying Book Multidimensional table, heipayun, Zhix
- 中非 钻石副石怎么镶嵌,才能既安全又好看?
- 13. (map data) conversion between Baidu coordinate (bd09), national survey of China coordinate (Mars coordinate, gcj02), and WGS84 coordinate system
- redis的持久化机制原理
- pytorch-线性回归
- liunx禁ping 详解traceroute的不同用法
- 【 YOLOv3中Loss部分计算】
- Halcon 模板匹配实战代码(一)
猜你喜欢
iTOP-3568开发板NPU使用安装RKNN Toolkit Lite2
Riddle 1
【pytorch 修改预训练模型:实测加载预训练模型与模型随机初始化差别不大】
[pytorch pre training model modification, addition and deletion of specific layers]
12. (map data) cesium city building map
Principle of redis cluster mode
多表操作-子查询
[crawler] bugs encountered by wasm
pytorch-softmax回归
【主流Nivida显卡深度学习/强化学习/AI算力汇总】
随机推荐
你做自动化测试为什么总是失败?
Linux安装部署LAMP(Apache+MySQL+PHP)
1个插件搞定网页中的广告
POJ 3176 cow bowling (DP | memory search)
Project summary notes series wstax kt session2 code analysis
C # implements WinForm DataGridView control to support overlay data binding
【SingleShotMultiBoxDetector(SSD,单步多框目标检测)】
Liunx prohibit Ping explain the different usage of traceroute
Acid transaction theory
石油化工企业安全生产智能化管控系统平台建设思考和建议
[mainstream nivida graphics card deep learning / reinforcement learning /ai computing power summary]
谜语1
vscode快捷键
yolov5目标检测神经网络——损失函数计算原理
[cloud native | kubernetes] actual battle of ingress case (13)
[leetcode] wild card matching
Go language learning notes - first acquaintance with go language
Idea set the number of open file windows
1.php的laravel创建项目
The survey shows that traditional data security tools cannot resist blackmail software attacks in 60% of cases