HTML+css实现元素居中对齐的方法

1.line-height实现居中对齐

此种方法只适用于单行文本的居中，需要知道父元素的高度，通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.main{width: 500px;height: 200px;background: skyblue;}.main p{text-align: center;/*文字水平居中*/line-height: 200px;}</style></head><body><div class="main"><p>我水平方向和垂直方向都居中啦</p></div></body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------分割线
一下的例子均可以对多行文字进行居中对齐；对齐的的对象不限于文，也可以是两个父子元素进行居中对齐；

4.使用absolute实行居中对齐

2.1absolute+margin实现

该方法需要知道父元素的宽和高，通过margin的的大小撑开一个距离从而实现居中。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.main{position: relative;width: 500px;height: 200px;background: skyblue;}.main .box{position: absolute;width: 200px;height: 50px;left: 50%;top: 50%;margin-top: -25px;margin-left: -100px;background: gray;}</style></head><body><div class="main"><div class="box">使用absolute+margin实现居中</div></div></body>
</html>

效果如下;

2.2通过absolute+transform实现

未知父元素的高度的情况下，通过给父元素position:relative，再给子元素position:absolute，通过translate即可定位到垂直居中的位置。translate(-50%,-50%)意思是相对自己向左边移动自身宽度一半的距离，向上相对自己向上移动自身高度一半的距离。
例子：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.main{position: relative;width: 500px;height: 200px;background: skyblue;}.main p{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}</style></head><body><div class="main"><p>transform实现垂直居中</p></div></body>
</html>

3.通过display:table-cell实现居中对齐

给快级父元素加display:table;属性，使得父元素成为块级表格；
给子元素加display：table-cell；属性，子元素成为列表元素
在给子元素加vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
此种方法可以给一大段文字做居中对齐的排版，文字会根据父元素的宽度自动换行，并且不许知道父元素的宽和高。
例子如下;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.main{width: 500px;height: 200px;background: skyblue;display: table;}.main p{display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><div class="main"><p>给父元素加display：table;给子元素加display：table-cell;给子元素加vertical-align:middle</p></div></body>
</html>

4.通过flex布局实现居中对齐

父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
这种方法不需要知道父元素放的宽高。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.main{width: 500px;height: 200px;background: skyblue;display: flex;justify-content: center;  /*水平居中对齐*/align-items: center;  /*垂直居中对齐*/}.item{width: 200px;height: 30px;background: gray;}</style></head><body><div class="main"><div class="item"></div></div></body>
</html>

父元素使用flex布局，并且加上justify-content: center;属性，子元素使用margin 0 auto;同样可以实现居中对齐。