HTML元素的水平/垂直居中方式（简单代码和图）
1.水平居中text-align：center;
在没有浮动的情况下，我们可以让需要居中的块级元素设为inline/inline-block，然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素（span，img，a等），直接在其父元素上添加text-align：center；即可。
.father{width: 200px;height: 200px;background-color: aqua;text-align: center;}.son{width: 100px;height: 100px;background-color: brown;display: inline-block;}
<div class="father"><div class="son"></div>
</div>
2.使用margin：0 auto;水平居中
居中的元素必须是块级元素，如果是行内元素，需要添加display：block；而且元素不浮动。
.father{width: 200px;height: 200px;background-color: aqua;}.son{width: 100px;height: 100px;background-color: brown;margin: 0 auto;}
<div class="father"><div class="son"></div>
</div>
3.定位实现水平垂直居中（需要计算偏移值）
必须要知道居中的元素的宽高
.father{width: 200px;height: 200px;background-color: aqua;position: relative;
}
.son{width: 100px;height: 100px;background-color: brown;position: absolute;left: 50%; top:50%;margin-left: -50px;margin-top:-50px;
}
<div class="father"><div class="son"></div>
</div>
4.定位实现居中（不需计算偏移值）
margin：auto;和四个方向定位搭配使用,不需要知道元素的宽高
.father{width: 200px;height: 200px;background-color: aqua;position: relative;}
.son{width: 100px;height: 100px;background-color: brown;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}
<div class="father"><div class="son"></div>
</div>
5.定位配合css3新属性transform：translate（x,y）使用
不需要知道元素的宽度和高度，在移动端用的比较多，因为移动端对css3新属性的兼容性比较好。
.father{width: 200px;height: 200px;background-color: aqua;position: relative;
}
.son{width: 100px;height: 100px;background-color: brown;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);
}
<div class="father"><div class="son"></div>
</div>
6.css3新属性calc()和定位配合使用（需要知道元素的宽高）
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
.father{width: 200px;height: 200px;background-color: aqua;position: relative;
}
.son{width: 100px;height: 100px;background-color: brown;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);
}
<div class="father"><div class="son"></div>
</div>
7.使用flex弹性盒布局 实现水平垂直居中
不需要知道元素本身的宽高以及元素的属性
.father{width: 200px;height: 200px;background-color: aqua;display: flex;justify-content:center; align-items:center;
}
.son{width: 100px;height: 100px;background-color: brown;
}
<div class="father"><div class="son"></div>
</div>
HTML元素的水平/垂直居中方式（简单代码和图）相关推荐
- HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...
- CSS文字或元素的水平垂直居中多种方式（简单明了）
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...
- margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法 兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...
- CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果 水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
- html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）
1.css实现居中 缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...
- 【css】常用的几种水平垂直居中方式与盒子模型，面试经常问到！
div水平垂直居中 假设结构为此,2个div嵌套 <div class="box"><div class="content"></ ...
- 未知宽高元素的水平垂直居中
大致有4种方法实现: 一.table布局(display:table) 二.绝对布局(position:absolute)+translate 三.转化 ...
- 元素的水平垂直居中解决方法
有时候为了使页面元素看起来更美观,常常会让元素水平居中,垂直居中.下面总结了几个常用的方法. 首先HTML结构如下: 1 <div class="out"> 2 < ...
- CSS实现子元素div水平垂直居中
div基本布局 <div class="main"><div class="center"></div>
最新文章
- 除了不要 SELECT * ，数据库还有哪些技巧
- 算法题3 寻找丑数数值逼近
- python简笔画绘制 数据驱动绘图恐龙_使用python turtle绘制简笔画大白-Go语言中文社区...
- python监听多个udp端口_Python的Socket编程过程中实现UDP端口复用的实例分享
- 中科大软件测试期末复习
- [OT]我的2010(加班无极限)
- git向远程推送代码提示fatal: Authentication failed
- AWT_Swing_JTextField （Java）
- Linux双网卡下的网络故障排查
- [android] 代码注册广播接收者利用广播调用服务的方法
- 认识网络、几种常用的网络拓扑图
- 如何申请MSN帐号和所有MSN后缀邮箱申请
- Java批量png转jpg图片格式
- DELPHI XE10 fmx表格控件Grid单元格根据内容值来设置颜色
- Spring AOP的MyBatis事务管理
- ASP.NET AES加密
- 数据库常用日期统计查询
- Python环境安装 官网下载 / 迅雷下载
- 菜鸟网管的入门之路-第一章、网络及硬件篇(1)
- Windows电脑怎么查看自己的电脑是64位的？