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

简单的几行,让子div上下垂直居中

给父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;
}
效果图如下:

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

方法二(使用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;
}
让子div上下垂直居中,子DIV居中

使用 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;
}
让子div上下垂直居中,子DIV居中

使用 Flexbox 的居中布局

.vertical-container {
        height: 300px;display: -webkit-flex;
            display:         flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            }
让子div上下垂直居中,子DIV居中
资源

Web 大前端教程

2019-1-24 0:44:12

插件

Easy WP SMTP - smtp邮件WordPress插件

2019-11-27 20:32:08

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索