元素水平垂直居中的方式

元素分为行内元素和块级元素,行内元素有1种方式设置元素垂直居中;块级元素有4种方式设置元素垂直居中。

Posted in HTML / CSS onMarch 31, 2021

行内元素

  1. 通过为父元素设置text-align、line-height属性实现元素垂直居中
.box{
	width:500px;
	height:100px;
	border:1px solid #333;
	line-height:100px;
	text-align:center;
}
<div class="box">
	<span>content</span>
</div>

块级元素

  1. 通过设置子元素的绝对定位和margin属性实现元素垂直居中(减去自身宽度高度的一半)
.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
<div class="box">
	<div></div>
</div>
  1. 通过设置父元素flex弹性布局的方式实现元素垂直居中(项目在主轴上的对齐方式为居中,项目在交叉轴上对齐方式为居中)
.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box div{
     width: 100px;
     height: 100px;
     border: 1px solid #333;
}
<div class="box">
        <div></div>
</div>
  1. 通过设置子元素的绝对定位和transform属性实现元素垂直居中(往x轴、y轴分别移动自身宽度和高度的50%)
.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
<div class="box">
	<div></div>
</div>
  1. 通过设置子元素的绝对定位和margin属性实现元素垂直居中(不存在兼容性问题,自适应宽高)
    原理
    设置margin:auto分配左右的剩余空间,所以元素可以水平居中;设置绝对定位,此时margin-top、margin-bottom从默认为0变成auto,设置top、right、bottom、left为0将找到父元素的位置(给浏览器重新分配一个边界框),填充其父元素的所有可用空间,margin垂直方向有了可分配的空间,所以此时元素可以垂直居中。
.box{
    width: 500px;
    height: 500px;
    border: 1px solid #333;
    position: relative;
}
.box div{
     width: 100px;
     height: 100px;
     border: 1px solid #333;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
}
<div class="box">
	<div></div>
</div>
HTML / CSS 相关文章推荐
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
简单实现一个手持弹幕功能+文字抖动特效
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
You might like
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python实现静态web服务器
2019/09/03 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
数控专业应届生求职信
2013/11/27 职场文书
酒店总经理助理职责
2014/02/12 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
七一晚会主持词
2015/06/29 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
分享python函数常见关键字
2022/04/26 Python