css

怎么用css实现水平垂直绝对居中? - css笔记

我们常常需要让某个div块或是文本水平垂直绝对居中,那么,都有哪些方法呢?这一次的css笔记分享下怎么用css实现水平垂直绝对居中

在使用CSS进行网页布局时,我们常常需要让某个div块或是文本水平垂直绝对居中,那么,都有哪些方法呢?这一次的css笔记分享下怎么用css实现水平垂直绝对居中。

第壹种: 

伸缩盒子,要定义在父类

怎么用css实现水平垂直绝对居中? - css笔记-Npcink
.father-box {
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center;/*垂直居中*/
}

第贰种:

若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可

怎么用css实现水平垂直绝对居中? - css笔记-Npcink
.father-box {
	height:200px;
}
.son-box {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

第叁种:

Flex 布局

怎么用css实现水平垂直绝对居中? - css笔记-Npcink
.father-box {
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}
.son-box {
	text-align: center;
}

第肆种:

怎么用css实现水平垂直绝对居中? - css笔记-Npcink
.father-box {
	position: relative;
	width: 800px;
	height: 300px;
}
.son-box {
	position: absolute;
	top: 50%;
        transform: translate(0, -50%);
	width: 100%;
        text-align: center;
}

比较专业的(推荐):

怎么用css实现水平垂直绝对居中? - css笔记-Npcink
怎么用css实现水平垂直绝对居中? - css笔记-Npcink

怎么居中? - CSS笔记

居中问题需要用到的方法。CSS没有那么复杂困难不同的情景解决不一样

下载权限

查看
  • ¥{{right.value}}
    {{right.value}}
    免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
最后修改: 2020-05-29 03:30
css

怎么实现抖音文字彩色抖动效果? - css笔记

2020-4-27 7:14:26

css

怎么添加个性化的鼠标样式? - css笔记

2020-4-29 23:19:06

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索