css使子元素在父元素居中的各种方法
2024-10-19 21:20:04
html结构:
<div class="parent">
<div class="child"></div>
</div>
方法一： display:flex
.parent {
width: 500px;
height: 500px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100px;
height: 100px;
background: blue;
}
方法二：display:table-cel
.parent{
width: 500px;
height: 500px;
background: red;
display: table-cell;
vertical-align: middle;
}
.child{
width: 100px;
height: 100px;
background: blue;
margin: auto;
}
方法三：绝对定位和0
.parent{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
background: blue;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
方法四：负边距
.parent{
width: 500px;
height: 500px;
background: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
以上四种方法都可以完成用css实现子元素在父元素实现水平和垂直居中。
最新文章
- YII2生成增删改查
- 用CSS3实现文字描边
- c语言二叉树
- jstl标签库基础教程及其使用代码(一)。
- easyui反选全选和全不选代码以及方法的使用
- tap,touch,touchstart,事件与click事件的区别
- poj 2151
- [Python]更加Pythonic的多个List合并和Python的安利
- 转载：[Java]读取文件方法大全
- MySql 取一天的开始时间和结束时间
- Cloudera Development Kit(CDK) 简介
- Nape "不动"刚体的碰撞交互
- 前后端分离密码登陆加密RSA方案(java后端)
- php函数 array_column
- PHP使用RabbitMQ实例
- 交叉编译Python-3.6.0到aarch64/aarch32 —— 支持sqlite3
- React组件设计（转）
- TFlearn——（2）SVHN
- android学习-异步消息处理机制
- SpringMVC使用Cron表达式的定时器