1.单行文本居中
- 设置水平居中:text-align:center
- 设置垂直居中: line-height:后面的属性值与容器的高度一致
<style>
.box1{
width:200px;
height:200px;
border:1px solid black;
/* 水平方向 */
text-align:center;
/* 垂直方向 */
line-height:200px;
}
</style>
<body>
<div class="box1">
helle,world
</div>
</body>
2.多行文本居中
- 设置水平居中:text-align:center
- 设置垂直居中:通过设置padding值来设置高度
3.盒子居中
<style>
/* 行内元素 */
.container{
width:300px;
height:300px;
border:1px solid #000;
/*水平垂直*/
text=align:center;
line-height:300px;
}
</style>
<div class="container">
<span>hello world</span>
<div class="box3">world hello</div>
<img src="" alt="">
</div>