Web前端学习div中的内容居中方式

新手学习web前端的过程中，总会有各种各样的问题，下面简单介绍div内图片和文字居中的几种方法：

1、text-align的值与说明：

text-align语法：

text-align : left | right | center | justify

text-align参数值与说明：

left : 左对齐

right : 右对齐

center : 居中

我们对text-align常用的参数值为left、right、center

text-align功能说明：

设置或检索对象中文本的左中右对齐方式。

2.CSS内容居中

使用div css实现字体水平居中的css样式单词为text-align，其值为center（居中）。

垂直居中单独文字只需要设置css样式line-height属性即可。文字与图片同排，在设置div高度同时再对此css样式的图片img样式设置vertical-align:middle垂直居中属性，如img{vertical-align:middle;}

3.margin: auto居中

4.使用absolute定位居中

这种方案有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height：

5.Flex居中方式

Flex的出现解决了传统居中方式难以实现的麻烦，仅需要几行代码就可以实现居中，Flex布局不仅能用于居中，在其他布局当中也相当的有效，详细的Flex可以看之前的笔记。想要启动Flex只要在父元素设置display： flex,内联元素的话则是display: inline-flex.

5.1水平居中

.parent {

display: flex;

justify-content: center;

}

5.2 垂直居中

.parent {

display: flex;

align-items: center;

}

5.3 水平垂直居中

.parent {

display: flex;

justify-content: center;

align-items: center;

}