web中⽂字和div常⽤的居中⽅法（htmlcss）
web中⽂字和div常⽤的⽔平垂直居中⽅法（html/css）
⽂章⽬录
⼀、⽂字的⽔平垂直居中
1.单⾏⽂字居中
//html
<div class="box1">
这是⼀个测试句⼦
</div>
对于单⾏⽂本将line-height属性值与height属性值设置⼀致即可。
代码如下：
/
/css
.box1{
width: 500px;
height: 100px;
font-size: 24px;
background-color: blue;
text-align: center;/*⽔平居中*/
line-height: 100px;/*垂直居中值为heigth的值*/
}
效果如下：
2.多⾏（⼀段）⽂字居中
//html
<div class="box2">
这是⼀个测试句⼦这是⼀个测试句⼦这是⼀个测试句⼦
</div>
对于多⾏⽂本居中，组合使⽤vertical-align:middle；和display:table-cell；实现垂直居中，text-align:center；实现⽔平居中。代码如下：
//css
.box2{
width: 500px;
height: 100px;
font-size: 24px;
background-color: red;
vertical-align: middle;/*vertical-align 属性设置元素的垂直对齐⽅式。*/
display: table-cell;
text-align: center;/*⽔平居中*/
}
效果如下：
⼆、div的⽔平垂直居中
//html
<div class="box">
<div class="box_bl">
</div>
</div>
实现box_bl容器的⽔平垂直居中
⽅法⼀
⽗级box设置positon:relative;（相对定位）；⼦级box_bl设置 position: absolute;（绝对定位）top、bottom、left、right的值设为0，margin设置为auto。
代码如下：
//css
.box{
width: 500px;
height: 600px;
background-color: black;
position: relative;
}
.box .box_bl{
width: 200px;
height: 200px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
效果如下：
css设置文字垂直居中⽅法⼆（未知宽⾼）
不确定当前div的宽度和⾼度，⽗级box设置positon:relative;（相对定位）；⼦级box_bl设置 position: absolute;（绝对定位）⽤transform: translate(-50%,-50%);
代码如下：
//css
.box{
width: 500px;
height: 600px;
background-color: black;
position: relative;
}
.box .box_bl{
width: 20%;
height: 20%;
background-color: brown;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
效果如下：
简单常⽤的居中⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。