flex布局水平垂直居中

在flex布局中，子元素的属性代码写在父盒子里面，并且flex布局中任何元素都可以设置大小；居中的思路就是分清楚主轴justify-content和侧轴align-items，都设置为center即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex居中</title><style>div {display: flex;height: 600px;width: 600px;background-color: green;/* flex属性写在父盒子里面 *//* 主轴居中 */justify-content: center;/* 侧轴剧中 */align-items: center;}span {height: 200px;width: 200px;background-color: tomato;}</style>
</head>
<body><div><span></span></div>
</body>
</html>

flex布局水平垂直居中相关推荐

flex布局水平垂直垂直_垂直和水平装饰
flex布局水平垂直垂直装饰器模式是在不更改其接口的情况下向对象添加功能的最佳方法之一. 我经常使用可组合装饰器,并且总是会问自己在功能列表必须可配置时如何正确设计它们. 我不确定我的答案是否正确 ...
flex实现水平垂直居中
父级元素使用flex布局父级元素使用justify-content: center;实现水平居中父级元素使用align-items: center;实现垂直居中示例代码: <!DOCTYP ...
flex布局实现垂直居中
使用flex布局实现居中布局的步骤: 父级元素使用flex布局父级元素使用align-items: center; 代码示例: <!DOCTYPE html> <html lang ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
弹性（flex）布局实现图片水平垂直居中
<div class="photo my1"><img src="./public/img/1.png"><div class=& ...
CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现
常用内联元素:a,img,input,lable,select,span,textarea,font 常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol, ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
CSS水平居中，垂直居中，水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
【前端学习笔记】09全方位了解flex布局
文章目录 flex布局 flex布局-介绍 flex布局-效果 flex布局-两根轴线 flex布局-容器属性 flex-direction flex-wrap flex-flow justify-c ...

flex布局水平垂直居中

flex布局水平垂直居中相关推荐

最新文章

热门文章