元素水平垂直居中的方式

元素分为行内元素和块级元素,行内元素有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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Javascript模块模式分析
2008/05/16 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
英语自我介绍演讲稿
2014/09/01 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
入党个人总结范文
2015/03/02 职场文书
公司承诺书格式范文
2015/04/28 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
情况说明书格式及范文
2019/06/24 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python