让浮层水平垂直居中的方法
来源:互联网 发布:数据统计图表分析 编辑:程序博客网 时间:2024/06/08 07:39
(一)利用绝对定位与transform
<div class="parent">
<div class="children"></div>
</div>
将父元素定位,子元素如下
.children{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
background: black;
}
(二)利用flexbox
.parent{
justify-content:center;
align-items:center;
display: -webkit-flex;
}
(三)当子元素的宽高固定,父元素内含有除居中元素外其它元素(空标签也行)或者父元素的高度不为0时
将父元素定位,子元素绝对定位,利用margin负值为子元素宽高的一半来实现。
代码如下:
<div class="parent">
<div class="children"></div>
<span></span>
</div>
.parent{
position: relative;
background: red;
}
.children{
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background: black;
position: absolute;
top: 50%;
left:50%;
}
(四)利用table
(五)display:table-cell
<div class="parent">
<div class="child">哈哈</div>
</div>
.parent{
width: 400px;
height: 100px;
background: black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
background: red;
display: inline-block;
}
(六)利用定位与margin:auto
<div class="child">哈哈</div>
</div>
height: 400px;
background: red;
position: relative;
}
.children{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: black;
}
- 让浮层水平垂直居中的方法
- div盒子水平垂直居中的方法
- div盒子水平垂直居中的方法
- 水平垂直居中的方法及其优缺点
- div盒子水平垂直居中的方法
- 常用的水平垂直居中方法
- div水平垂直居中的方法
- 总结的水平,垂直居中设置方法
- 水平垂直居中的几种方法
- 水平垂直居中的几种方法
- 实现垂直水平居中的方法
- 让元素水平垂直居中的方法
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- 元素的水平居中,垂直居中以及同时水平,垂直居中方法
- html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
- CSS水平居中和垂直居中的各种方法
- CSS水平居中和垂直居中的各种方法
- CSS水平居中/垂直居中的N个方法
- 段寄存器和8种地址寻址方式
- 不能显示日志Failed to load class "org.slf4j.impl.StaticLoggerBinder".
- python print格式化输出
- 自动转换静态表格(php+ mysql)
- 在UICollectionView上面添加分割线
- 让浮层水平垂直居中的方法
- JAVA中对存储过程的调用方法(引)
- mysql
- 利用multiprocessing做进程间通信
- 基于机器学习的客流失预警分析
- angualrJs中$interpolate的运用
- spring-boot问题总结手册
- **c语言的预处理#,##的详细功能说明**
- Java多线程之线程的可见性(二)