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;
}

效果如下：

方法二（未知宽高）

不确定当前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%); 
}

效果如下：

---

简单常用的居中方法。