社区
CSS
帖子详情
margin: auto 实现水平垂直居中
@hansy
2019-04-09 03:07:23
一般来说 margin:auto 只能实现水平居中,但是结合flexbox布局,就能实现水平和垂直方向都居中。
效果图如下:
css:
.automargin {
display: flex;
width: 100%;
height: 100%;
}
.automargin div {
margin: auto;
}
html:
<div class="automargin">
<div>利用父级display: flex;和子级margin: auto;实现元素水平垂直居中</div>
</div>
...全文
689
5
打赏
收藏
微信扫一扫
点击复制链接
分享
下载分享明细
分享
举报
写回复
5 条
回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
kerwin_1727
2021-04-21
。。。。。。。。画蛇添足?
打赏
举报
回复
赞
JA+
2021-04-19
但是。。。为什么呢。
打赏
举报
回复
赞
ZanMusi_1998
2019-04-18
就是留言 赚经验
打赏
举报
回复
赞
tomorrownan
2019-04-09
。。。。是的吧
打赏
举报
回复
赞
我自是年少-韶华倾负
2019-04-09
这个帖子是要做什么送分帖还是给自己做精的
打赏
举报
回复
赞
相关推荐
水平
垂直
居中
方案
一、
水平
居中
1.1.行内元素
水平
居中
给父级元素设置text-align
:
center; 1.2.块状元素
水平
居中
给要
居中
的元素设置
margin
:
o
auto
; 1.3.多个块状元素
水平
居中
将需要
居中
的元素设置为display
:
inline-block;将父级元素设置:text-align
:
center; 二、
水平
垂直
居中
...
水平
垂直
居中
水平
垂直
居中
的几种方法先
水平
再
垂直
flex 布局绝对定位 + transform行内元素 先
水平
再
垂直
通过设置
margin
:
0
auto
实现
水平
居中
.content { width
:
300px; height
:
300px; background
:
orange;
margin
:
0
auto
...
你不知道的
margin
:
0
auto
和
margin
:
auto
最近复习html和css的内容,想起来一个之前没想明白的问题,为什么块级元素
margin
:0
auto
可以
实现
水平
居中
,而
margin
:
auto
不能
实现
水平
垂直
双
居中
呢?
margin
:
0
auto
居中
的原理 #parent{ height
:
200px; width
:
200px; background
:
black;
margin
:
0
auto
; } #child{ height
:
100px; width
:
100px; background
:
red;
margin
:
0 aut
css的
垂直
居中
的总结
/* 1.文本
居中
text-align
:
center; 2.
水平
居中
margin
:
0
auto
; 3.
水平
垂直
居中
display
:
inline-block; display
:
flex; justify-content
:
center; 4.
水平
垂直
居中
height
:
...
flex
实现
登录框
水平
垂直
居中
在我们的布局中,
水平
居中
很容易,但
垂直
居中
稍微有点复杂。下面就给大家分享下通过Flex布局轻松
实现
登录框在
水平
、
垂直
方向上的
居中
效果。 完整代码: * {
margin
:
0; padding
:
0; } body { height
:
100vh; display
:
flex; /*登录框
水平
垂直
居中
*/ justify-content
:
cent...
发帖
CSS
微信扫一扫
点击复制链接
分享社区
下载分享明细
6.0w+
社区成员
6.0w+
社区内容
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
帖子事件
创建了帖子
2019-04-09 03:07
社区公告
暂无公告