给父div如下CSS属性;

/*让子DIV居中*/
	display:flex;
	justify-content:center; /*内容水平居中*/
	align-items:center; /*内容垂直居中*/

如何在一个div中使其子div居中

来源于：

https://blog.csdn.net/u012088576/article/details/68483623

假设父div的类名为father，子div的类名为son。在html中的形式如下：
<div class="father">
       <div class="son">
  </div>
接下来用css设置son居中的方法主要有4

方法一（使用绝对布局）：
.father{
width:500px;
height:500px;
position:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background-color:black;
}
效果图如下：

方法二（使用table-cell形式）
.father{
width:500px;
height:500px;
display:table-cell;
text-align:center;
vertical-align:middle;
background-color:red;
}
.son{
width:200px;
height:200px;
display:inline-block; ps：这句话一定要加，不然没效果哦
background-color:black;
}
效果如上
3.方法三（使用弹性布局flex）
.father{
width:500px;
height:500px;
display:flex;
justify-content:center; 内容水平居中
align-items:center; 内容垂直居中
background-color:red;
}
.son{
width:200px;
height:200px;
background-color:black;
}
效果如上
4.方法四（使用绝对布局）
.father{
width:500px;
height:500px;
display:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background-color:black;
}
效果如上

这是目前我所了解的4种方法，ie和chrome都兼容，其他浏览器没测，目测是都兼容的。欢迎大家查漏补缺！
---------------------
作者：差不多先生img
来源：CSDN
原文：https://blog.csdn.net/u012088576/article/details/68483623
版权声明：本文为博主原创文章，转载请附上博文链接！

以下来源于：

http://zh.learnlayout.com/flexbox.html

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。

网上有不少过时的 flexbox 资料。 如果你想要了解更多有关 flexbox 的内容，从这里学习如何辨别一份资料是否过时。我已经写了一份关于最新标准的详细文章。

使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：

使用 Flexbox 的简单布局

.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;flex: 1;
}

使用 Flexbox 的牛逼布局

.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}

使用 Flexbox 的居中布局

.vertical-container {
        height: 300px;display: -webkit-flex;
            display:         flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            }