在平时编译时会用到很多属性，本文具体的来说一下居中时候常用的方法。

使用display:flex;也能实现居中效果；

采用flex布局的元素，成为flex容器，他的所有子元素自动成为容器成员,成为容器项目；

容器默认存在2根轴：水平的主轴和垂直的交叉轴

其中主轴的对齐方式有（justify-content）:

flex-end 右对齐

Center 居中

Space-between 两端对齐，项目之间的间隔都相等

Space-around 每个项目两侧的间隔相等

交叉轴的对齐方式有(align-items)：

flex-end 下对齐

center 居中

baseline 元素位于容器基线上

实现居中效果：display:flex;

justify-content:center;

align:items:center;

在空白处加行css，让这个div在页面居中（上下左右都居中）

<div style="border:1px solid red;width:200px;height:200px;

__________________________________________”>Hello 爱投资！！</div>

第一次看到这个问题的时候

我觉得这个问题出的有问题

你都没给我父布局大小，让我怎么让它居中，

老师讲完以后，还是懵了很久，

直到有一天问了”大神”

大神给了我答案并详细给我讲解为什么这样写就能让div居中

即使没给父布局大小

代码及解析：

Position:flex;

首先为div设置定位属性，属性值为flex。

个人理解为，因为这个div一直居中，其位置是固定的。所以用了flex

Left：50%;

Top：50%;

然后为div设置定位以后的位置属性：left：50%设置该div距离左边有其父布局有50%的距离；top：50%设置该div距离上边有其父布局有50%的距离。

Margin-left：-100px;

Margin-top:-100px;

Margin-left:-100px;该div的width为200px，为其设置margin-left：-100px；以后

该div左半部分在其父布局50%的区域

右半部分在其父布局右半部分显示

如图所示，该div就在其父布局上下，左右居中。

对于居中，因其出现的地方很多，我有很多不同的见解，就仅仅一个居中，但是却拥有很多的用途；text-align，vertical-align诸如等等都能够让某一元素拥有居中的效果。

我想对vertical-align说一些自己的看法；vertical-align需要在行内块元素的前提下才能够有作用，也就是需要给元素定义dispaly：inline-block；并且也是直接给元素本身而不是定义在其父元素上。

<style>

.box{width:100px;

height:100px;

border:1px solid #000;

}

.box p{display:inline-block;}

.box b{display:inline-block;}

</style>

<div class=”box”>

<p>法是否符合规划</p>

<b>丹江口单方事故</b>

</div>

只有对两个行内块元素定义了vertical-align之后vertical-align才能出现效果