div垂直居中的4种方式方式
2024-10-21 11:32:34
一、使用单元格居中
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<style type="text/css">
/* 使用单元格居中 */
.out {
width: 400px;
height: 400px;
background: pink;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 100px;
height: 100px;
display: inline-block;
background: coral;
} </style>
<body>
<div class="out">
<div class="content"> </div>
</div>
</body>
</html>
二、弹性盒子 flex
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<style type="text/css">
/* 使用弹性盒子 */
.out {
width: 400px;
height: 400px;
background: rgb(109, 106, 107);
display: flex;
}
.content {
width: 100px;
height: 100px;
display: inline-block;
background: coral;
margin: auto;
} </style> <body>
<div class="out">
<div class="content"> </div>
</div>
</body> </html>
三、使用transform移动定位
<!DOCTYPE html>
<html> <head>
<title>测试</title>
</head>
<style type="text/css">
/* 使用弹性盒子 */
.out {
width: 400px;
height: 400px;
background: powderblue;
position: relative;
}
.content {
width: 100px;
height: 100px;
background: coral;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} </style> <body>
<div class="out">
<div class="content"> </div>
</div>
</body> </html>
四、margin-left、margin-top
<!DOCTYPE html>
<html> <head>
<title>测试</title>
</head>
<style type="text/css">
/* 使用弹性盒子 */
.out {
width: 400px;
height: 400px;
background: powderblue;
position: relative;
}
.content {
width: 100px;
height: 100px;
background: coral;
position: absolute;
margin-top: 50%;
margin-left: 50%;
} </style> <body>
<div class="out">
<div class="content"> </div>
</div>
</body> </html>
最新文章
- SSMS错误：A connection was successfully established with the server, but then an error occurred during the login process
- canvas画简单电路图
- OpenGL官方教程——着色器语言概述
- this对象
- HDU 2577（DP）
- HTML5中的Range对象的研究
- hadoop启动后jps没有namenode(转)
- C#使用EmguCV实现视频读取和播放，及多个视频一起播放的问题
- python安装(windows)
- 【原创】用python实现shell的tail操作
- applicationContext-mail.xml 模板
- IO 图
- 根据日期字符串获取星期几，日期获取星期，时间获取星期，js获取星期
- 简单的RPC java实现
- 【转】Android Application 对象介绍
- self-question
- 利用ASP.NET操作IIS （可以制作安装程序）
- NFS服务
- 多线程动态规划算法求解TSP(Traveling Salesman Problem) 并附C语言实现例程
- 13点值得我们注意的谷歌的JavaScript编写风格