web前端-01：关于css居中的几种方法
web前端-01：关于css居中的几种方法
在学习web前端的过程中，居中问题应该算得上是个比较经典的问题了吧，关于居中的方法也有很多，总结一下我自己比较喜欢用的几个方法。
1 利用绝对定位来做到水平垂直居中
前提是父元素定位为relative
css示例：
.abs-center{
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
margin: auto;
}
2 利用css的transform选项做到水平垂直居中
css中的定位都是以左上角为准，在绝对定位下top和left均设置为50%
，此时元素的左上角位于父元素的中心，再用transform选项的translate函数相对于子元素自身水平垂直方向各平移 -50%，子元素就可以水平垂直居中啦。
根据情况需要在transform前加上浏览器厂商前缀
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3 文本的水平垂直居中
文本水平垂直剧中的方法比较简单, 注意设置line-height为父元素的高度
.text-center{
width: 100%;
text-align: center;
line-height: 父元素的高度;
}
4 其他水平或垂直居中
掌握了以上三种，单独的水平或垂直居中想必就简单的多了，对其稍加修改就可以得到相应的水平或者是垂直居中。
除此之外，对于块级元素，也可以用margin：0 auto；来做到水平居中
web前端-01：关于css居中的几种方法相关推荐
- web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法 本人只是个做前端刚刚半年的小白 技术还不熟练 见识也不够广 希望大家不喜勿喷 如果有不对的地方欢迎大家指出 我更加会努力的学习 提高自己的水平! 本人只是 ...
- Web前端入门：CSS中颜色三种写法
在CSS中,颜色的表示有三种写法,分别是: 英文单词 16进制 rgb+rgba 1.英文单词: 例如:red, white, blue, skyblue, pink, deeppink, ...
- Web前端 | HTML引入CSS样式的三种方式
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
- css居中的几种方法_CSS布局中的水平居中的方法
在我们做网站的过程中,怎么都逃不掉居中这个话题,各种花里胡哨的,可能只需要掌握两三个就可以完成一个网页的布局了.今天就来介绍下水平居中有哪些方法. 第一种,设置当前元素水平居中,元素为block时 要 ...
- css居中的几种方法_CSS几种常用的水平垂直居中对齐方法
文字的水平垂直居中 class="content"> <p>文字水平垂直居中p> </div> .content{ width: 400px; ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 01.{HTML题目}HTML是什么意思? (B) A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 ...
- web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
最新文章
- PHP 如何在Redis中实现事物(事物提交和事物回滚)
- 什么叫返回路径平面上的间隙_差分信号回流路径的全波电磁场解析
- BZOJ 1012 [JSOI2008]最大数maxnumber
- php 开启命令模式,如何启用PhpStorm中的命令行工具
- 不同vlan之间如何ping通_【丰润达.安防百科】如何实现交换机不同VLAN、不同网段之间互访？...
- 安卓开发之android使用webview时按后退会退出而不是回退的问题
- CSS3特效 - 呼吸灯效果
- 创建多个虚拟环境 windows python Anacoda tensorflow
- mysql datahost ha_mysql MySQL数据库高可用HA实现
- QT每日一练day24：绘画事件
- Centos7+ 修改hostname主机名命令
- [渝粤教育] 盐城工学院 大学物理（力学、振动与波动） 参考 资料
- Android使用zxing生成二维码
- 农场买了一羊，第一年是小羊，第二年底生一只，第三年不生，第四年底再生一只，第五年死掉
- 淘宝权重及其大数据分析
- 【pycharm】WiFi密码破解【简单易学】
- 一分钟了解“副词、系动词、情态动词、实意动词的先后位置关系”
- 2022年计算机四级考试冲刺试题及答案（多选题）
- python的itchat模块_Python itchat模块在微信上的各种小应用
- 强在工业互联网的欧洲，为何没有牛逼的互联网公司？