css 元素水平垂直方向居中
2024-09-04 13:27:09
html部分
<div class="parent">
<div class="child">
- -居中- -
</div>
</div>
css部分
一、text-align:center;vertical-align:middde 实现
.parent{
width: 400px;
height:400px;
background:#666666;
text-align: center;
font-size: 0px;
}
.child{
font-size: 16px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
.parent:after{
content: '';
width:;
height: 100%;
display: inline-block;
vertical-align: middle;
}
/* .add{
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}*/
也可不用伪元素after，在child的div后面写一个span class为add的标签。
font-size:0px;解决当child元素内的字超过一行 垂直居中失效问题。
二 、 display:table-cell 实现
.parent{
width: 400px;
height:400px;
background:#666666;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
background: #cccccc;
display: inline-block;
}
转化为table元素。
三 、定位 top left right bottom margin:auto 实现
.parent{
width: 400px;
height:400px;
background:#666666;
position: relative;
}
.child{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom:0px;
margin: auto;
background: #ccc;
}
子元素需设宽高，如果不设会和父元素同宽高。
四、定位 top left margin实现
.parent{
width: 400px;
height:400px;
background:#666666;
position: relative;
}
.child{
width: 100px;
height: 100px;
background: #cccccc;
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top: -50px;
}
定位后 child的左上角在父元素的正中央，需要改变child的位置，让child和parent中心点在同一位置。
五、定位和css3 transfrom 实现
.parent{
width: 400px;
height:400px;
background:#666666;
position: relative;
}
.child{
background: #cccccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
translate(x,y) 的50%相对于自身来计算。
六、display:flex 弹性盒 实现
.parent{
width: 400px;
height:400px;
background:#666666;
display: flex;
justify-content: center;
align-items: center;
}
.child{
background: #cccccc;
}
默认flex-direction:row;是水平排列，
justify-content是主轴方向,此时相当于是X轴。
align-items:center;是交叉轴方向，此时相当于是Y轴。
若设置flex-direction:column;为竖直排列，
justify-content为Y轴，align-items为X轴。
display:-webkit-box!important;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
最新文章
- Mybatis原理分析之二：框架整体设计
- HDU4888 Redraw Beautiful Drawings（最大流唯一性判定：残量网络删边判环）
- xcode引入第三方静态类库 duplicate symbol _OBJC_XXX 重复编译错误
- STM32中断控制及优先级设置
- CRF++中文分词使用指南
- mysql登陆报错（ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)）
- MVC 常用方法
- 基于Web的IIS管理工具
- vue中的checkbox全选和反选
- spring集成rabbitmq
- banner
- node访问oracledb的环境搭建
- luogu P3293 [SCOI2016]美味
- php实现多域名共享session会话
- 5.5 C++重载赋值操作符
- Python: PySide(PyQt)QMessageBox按钮显示中文
- linux_开发软件安装=命令步骤
- OAuth2学习笔记
- C实现线程池
- 免费申请 Github 私有仓库--学生和教育人士的福利