元素水平垂直居中的方式

元素分为行内元素和块级元素,行内元素有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特效之动画:animation的应用
May 09 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
详解rem 适配布局
Oct 31 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
js中split()方法得到的数组长度问题
2018/07/19 Javascript
基于并发服务器几种实现方法(总结)
2017/12/29 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
PyQt5实现登录页面
2020/05/30 Python
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
应届生幼儿园求职信
2013/11/12 职场文书
员工年终演讲稿
2014/01/03 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
实习公司领导推荐函
2014/05/21 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
2014年稽查工作总结
2014/12/20 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
首都博物馆观后感
2015/06/05 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js