web中文字和div常用的居中方法（html/css）
web中文字和div常用的水平垂直居中方法（html/css）
文章目录
web中文字和div常用的水平垂直居中方法（html/css）一、文字的水平垂直居中1.单行文字居中2.多行（一段）文字居中
二、div的水平垂直居中方法一方法二（未知宽高）
一、文字的水平垂直居中
1.单行文字居中
//html
这是一个测试句子
对于单行文本将line-height属性值与height属性值设置一致即可。 代码如下：
//css
.box1{
width: 500px;
height: 100px;
font-size: 24px;
background-color: blue;
text-align: center; /*水平居中*/
line-height: 100px; /*垂直居中 值为heigth的值*/
}
效果如下：
2.多行（一段）文字居中
//html
这是一个测试句子这是一个测试句子这是一个测试句子
对于多行文本居中，组合使用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
实现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;
}
效果如下：
方法二（未知宽高）
不确定当前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%);
}
效果如下：
简单常用的居中方法。