本文详细介绍了如何使用CSS实现文本和盒子的水平垂直居中，包括外边距、定位、平移和弹性盒子等方法，特别推荐使用弹性盒子作为简单、快速的解决方案。
一、文本水平垂直居中
二、盒子水平垂直居中
1.外边距
2.定位
3.平移
4.弹性盒子（简单、快速、常用、推荐）
分割线----------------------------------------------
一、文本水平垂直居中
line-height = height 文本垂直居中
text-align:center 文本水平居中显示效果
<style>
.box1{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
.box2{
/* 元素左浮动 */
float: left;
width: 200px;
height: 200px;
background-color: green;
color: #fff;
/* 设置元素外边距 */
margin-left: 20px;
/*文本垂直居中*/
line-height: 200px;
/* 文本水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div class="box1">文本原来位置</div>
<div class="box2">文本水平垂直居中</div>
</body>
最低0.47元/天 解锁文章
1958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
