元素水平垂直居中的方式

元素分为行内元素和块级元素,行内元素有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 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
css弧边选项卡的项目实践
May 07 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
多文件上传的例子
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
Extjs 几个方法的讨论
2010/01/28 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python之时间和日期使用小结
2019/02/14 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
事业单位考察材料范文
2014/12/25 职场文书
留学推荐信怎么写
2015/03/26 职场文书
民事申诉状范本
2015/05/20 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python