水平垂直居中 -webkit-box
转自：https://blog.csdn.net/BIG_LEE_SHOW/article/details/79246182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height:100%;
}
/*理解-webkit-box-flex的用法*/
.parent1{
/*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
display: -webkit-box;
-webkit-box-pack: center; /*让元素水平居中，还有其他属性，官方文档有解释*/
-webkit-box-align: center; /*让元素垂直居中，包含其他属性，官方文档有解释*/
margin: 0 auto;
width: 100%;
height: 100%;
}
.child1{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: red;
-webkit-box-flex:1;
/*box-flex里面可以添加任意数字包括小数，可以让整个子元素针对父元素的宽度按百分比例进行划分*/
}
.child2{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:2;
}
.child3{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:3;
}
.child4{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:4;
}
/*让子元素水平垂直居中*/
/*为了浏览器兼容，所以将代码补全*/
.parent2{
width:100%;
height:100%;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
/*没有文字的DIV*/
.child5{
width: 200px;
height:200px;
background-color:#eee;
}
/*有文字的DIV*/
/*如果希望里面的文字居中，就在里面再加一个div，将文字写在div里*/
.parent3{
width:100%;
height:100%;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
.child6{
width: 200px;
height:200px;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
background-color:#eee;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
</style>
</head>
<body>
<!-- 理解box-flex -->
<div class="parent1">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<div class="child4">4</div>
</div>
<!-- 块元素垂直居中 -->
<div class="parent2">
<div class="child5">
</div>
</div>
<!-- 块元素里包含文字垂直居中 -->
<div class="parent3">
<div class="child6">
<div>1</div>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
2019-09-06 当对函数的返回值有多种需求时（执行是否成功，及业务数据的返回值），可采用的方法
2014-09-06 在UIElement外面多套一层布局面板（Grid、StackPanel）的意义
2014-09-06 界面的背景可以使用美工设计的“一整张图片”来衬托
2014-09-06 在Window工作区按下鼠标左键拖动窗体
2014-09-06 滚动条——WPF ScrollViewer的应用
2014-09-06 UIElement.IsMouseCaptured属性的应用
2014-09-06 WPF中的事件列表 .