无固定高度的div垂直居中
2023-04-18 14:48:06 时间
1、无固定高度的div垂直居中 – CSS
实现效果图如下:
代码附上:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<!--一个未知宽高的弹出框,水平垂直居中-->
<div style="position:relative;width:100%;height:450px;border:1px solid #888">方法1
<div class="modal">
<div class="modal-header">弹出窗标题</div>
<div class="modal-body">
.modal类中的position: absolute;表示现对于父类元素height:450px;来居中的
.modal类中的position: fixed;表示现对于body来居中的
</div>
</div>
</div>
<style type="text/css">
.modal-header {
padding: 10px 20px;
text-align: center;
background: rgba(0, 0, 0, .25);
color: #fff;
}
.modal-body {
padding: 20px;
background: #fff;
}
.modal {
overflow-y: auto;
max-height: 95%;
font-size: 16px;
z-index: 103;
border-radius: 5px;
background: #ffffff;
width: 80%;
border: 1px solid #e5e5e5;
color: #333;
display: block;
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
/**主要代码*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<!--end-->
</body>
</html>
2、CSS3垂直居中
section {
display: flex;
display: -webkit-flex;
display: -webkit-box;
}
section div {
border: 1px solid #dddddd;
height: 200px;
margin-right: 20px;
width: 200px;
border-radius: 5px;
cursor: pointer;
box-shadow: 5px 4px 13px -1px #8e8e8e;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击