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

效果如下：

简单常用的居中方法。

　　学完CSS+Div的视频，感觉讲的挺清晰的，不看不知道，一看吓一跳，原来CSS可以为网页增色不少呢！

    CSS全称是Cascading Style Sheet,层叠样式表。它把网页的样式和内容分离开，实现了两者的解耦，让样式的控制更加的灵活。

    在Html大家庭中，CSS主要负责Html样式、JS经常作为触发的事件、xml可以传输小量的数据、Ajax主要进行异步刷新，它们都实现了与网页内容解耦，增强了内聚性。

    CSS很简单，就三种选择器：ID（#）、标签、类（.）。格式就是符号+名称+{}，{}里面放 属性+属性值。格式如下，ID类别名称前面的符号是#，标签直接写在类别名称的位置写标签名称（如：span）就可以：

    就这三种选择器，涵盖了整个CSS的样式控制。凡是web页面上面可以看到的元素，都能通过CSS润色。它控制的不仅仅是大小、形状、颜色，还能控制网页的布局，这就要用到Div和Span等元素。

    CSS真的很简单，但是做好一个网页并非易事。这里的总结仅仅是一个开始，不断总结不断前行吧~