在平时编译时会用到很多属性，本文具体的来说一下居中时候常用的方法。
使用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才能出现效果
编辑：千锋HTML5