让子 div 上下垂直居中,子 DIV 居中

给父 div 如下 CSS 属性;

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

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

来源于：

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

1
假设父div的类名为father，子div的类名为son。在html中的形式如下：
2
<div class="father">
3
       <div class="son">
4
  </div>
5
接下来用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 的简单布局

1
.container {
2
display: -webkit-flex;
3
display: flex;
4
}
5
nav {
6
width: 200px;
7
}
8
.flex-column {
9
-webkit-flex: 1;flex: 1;
10
}

使用 Flexbox 的牛逼布局

1
.container {
2
display: -webkit-flex;
3
display: flex;
4
}
5
.initial {
6
-webkit-flex: initial;
7
flex: initial;
8
width: 200px;
9
min-width: 100px;
10
}
11
.none {
12
-webkit-flex: none;
13
flex: none;
14
width: 200px;
15
}
16
.flex1 {
17
-webkit-flex: 1;
18
flex: 1;
19
}
20
.flex2 {
21
-webkit-flex: 2;
22
flex: 2;
23
}

使用 Flexbox 的居中布局

1
.vertical-container {
2
        height: 300px;display: -webkit-flex;
3
            display:         flex;
4
            -webkit-align-items: center;
5
            align-items: center;
6
            -webkit-justify-content: center;
7
            justify-content: center;
8
            }