简单方便的div垂直居中。
2024-04-11 04:24:16
此处讨论的是，在一个父容器中只有一个DIV，这个DIV相对于父元素垂直居中的问题：
以下列举三种方式：这里为了层次清晰，都是采用的sass写法。
一：适用于子元素有具体的宽高
.wrap{
//父元素可以不定义任何属性
.content{
position:absolute;
height:100px;
top:50%;
margin-top:-50px;//自身高度的一半}}
二：适用于子元素和父元素都没有具体的宽高
.wrap{
display:table;//父元素必须要有的样式属性
.content-wrap{
display:table-cell;
vertical-align:middle;
//子元素必须有的样式，其实是借用table布局。
.content{
//不需要定义任何样式，就会再content-wrap里面居中
}}}
三：适用于子元素有固定的高宽
.wrap{
position:relative;
.content{
position:absolute;:
width:200px;
height:200px;
top:0;
bottom:0;
margin:auto;}
}
最新文章
- rpc-1-OSI模型
- Linux-以指定用户运行redis
- Java [Leetcode 102]Binary Tree Level Order Traversal
- html系列教程--元素
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）
- 教你做炫酷的碎片式图片切换 (canvas)
- Esri：为Web GIS注入新内涵
- PAT乙级-1041. 考试座位号(15)
- db powerdesign CDM、LDM、PDM、OOM的区别
- 利用maven的profiles灵活的配置多环境
- Java SE LinkedList的底层实现
- 《RECURRENT BATCH NORMALIZATION》
- Android 设备管理API概览（Device Administration API）
- 20165324 《网络对抗技术》week1 Kali的安装与配置
- 利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能
- [Spring MVC] - JSP + Freemarker视图解释器整合(转)
- Django - 路由层（URLconf）
- 一次WEB前端优化尝试
- Kubenertes资源分配之Request和Limit解析
- 设计模式——工厂模式(Factory Method)