flex实现水平垂直居中

父级元素使用flex布局
父级元素使用justify-content: center;实现水平居中
父级元素使用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>Document</title><style>.a {display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;background-color: royalblue;height: 100px;}.a .one {background-color: aqua;height: 20px;}.a .two {background-color: red;height: 20px;}</style></head><body><div class="a"><div class="one">111111111111111111</div><div class="two">222222222222222222</div></div></body>
</html>

效果：

flex实现水平垂直居中相关推荐

flex布局水平垂直居中
在flex布局中,子元素的属性代码写在父盒子里面,并且flex布局中任何元素都可以设置大小:居中的思路就是分清楚主轴justify-content和侧轴align-items,都设置为center即可 ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
块级元素水平垂直居中方法
1.已知块级元素的宽和高,使用绝对定位absolute和外边距实现水平垂直居中. 父元素position:relative,子元素position:absolute;top:50%;left:50%; ...
利用flex实现元素水平垂直居中
首先介绍一下flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,成为flex项目(flex it ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
[CSS] CSS display:flex实现内容水平垂直居中展示
display:flex实现内容水平垂直居中展示需要增加下面两点就能实现首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...
弹性（flex）布局实现图片水平垂直居中
<div class="photo my1"><img src="./public/img/1.png"><div class=& ...
CSS 水平垂直居中:flex+justifycontent+algin-items
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>水平垂 ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...

flex实现水平垂直居中

flex实现水平垂直居中相关推荐

最新文章

热门文章