css元素实现垂直竖直万能居中

简介: css元素实现垂直竖直万能居中

今天学到一套很强大css样式,据相关人士透露,只要加入这些元素,万物皆可实现居中

1.居中

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;

image.png

2.左右留空,平均分配居中

display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;

image.png

3.左右不留空,平均分配居中

display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;

image.png

4.平均分配居中

display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;

image.png

5.垂直居中

display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

image.png

目录
相关文章
|
5天前
|
移动开发 前端开发 JavaScript
CSS3 标签元素显示模式
CSS3 标签元素显示模式
|
2天前
|
前端开发 UED
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
15 5
|
1天前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
8 3
|
2天前
|
前端开发 开发者
CSS属性选择器:精确定位元素的利器
CSS属性选择器:精确定位元素的利器
11 4
|
3天前
|
前端开发
|
9天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
2天前
|
前端开发 容器
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
7 0
|
2月前
|
前端开发
css文本垂直展示------
css文本垂直展示------
19 1
css文本垂直展示------
|
27天前
|
前端开发
CSS实现将垂直滚动条放置在左侧方法
CSS实现将垂直滚动条放置在左侧方法
19 2
|
2月前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
22 2