通过display:flex实现CSS垂直居中

父元素添加

display: flex;

子元素添加

align-self: center

示例

<div class='father'><div class='child'></div>
</div><style>.father {background: #ff6b89;height: 600px;width: 100px;dispaly: flex;}.child {background: #6a83ca;height: 100px;width: 100px;align-self: center;    }
</style>

通过display:flex实现CSS垂直居中相关推荐

CSS垂直居中的8种方法
1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
[CSS] CSS display:flex实现内容水平垂直居中展示
display:flex实现内容水平垂直居中展示需要增加下面两点就能实现首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...
CSS的display:flex说明
在进行网页前端设计时,需要垂直居中显示文本,但CCS似乎没有明确的垂直居中的代码方法,由于目前的页面不再考虑以前的浏览器了,因此采用CSS3的display:flex方法来实现.现记录一下flex属性 ...
html div flex,利用css flex实现垂直居中
应用flex实现垂直居中行使css flex完成垂直居中.flex笼统不是实现垂直居中最好的决定,由于IE8,9其实不支持它. 那会,为了用flex实现垂直居中,咱们首先要确立一个包裹着图片的div ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片.文字等行内元素(in ...
css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
html css学习笔记~ 基础知识和页面显示的四个区域内容及display:flex 等常用的一些命令（手画）
一般在html文件中输入<link href=".../xxx.css" rel="stylesheet"/> 通过这样的外部样式联系 css & ...

通过display:flex实现CSS垂直居中

通过display:flex实现CSS垂直居中相关推荐

最新文章

热门文章