元素居中的五种方法

最新推荐文章于 2022-12-15 22:10:46 发布
最新推荐文章于 2022-12-15 22:10:46 发布
阅读量385 收藏
点赞数 1
分类专栏： 前端易错 文章标签： html5 css3 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45022563/article/details/119383814
版权

  1. 通过margin实现
    首先需要将父元素样式设置position：relative；
    将子元素样式设置position：absolute；
    left:50%;
    margin-left: -自身宽度的一半;
    top:50%;
    margin-top: -自身高度的一半;

  2. 通过margin实现
    首先需要将父元素样式设置position：relative；
    将子元素样式设置position：absolute；
    top 0
    bottom 0
    left 0
    right 0
    margin auto

  3. 通过位移实现
    首先需要将父元素样式设置position：relative；
    将子元素样式设置position：absolute；
    left：50%；
    top：50；
    trsform：trslate（-50%，-50%）

  4. 通过flex实现
    justify-content:center ; align-items:center;

  5. 通过grid实现
    justify-items:center; align-items:center; grid

新阿伟先生
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
元素水平垂直居中的几种方法
01-20
多的不说，咋们直接进入正题 纯用margin是做不到的 在这里插入代码片 Document #box1{ width:300px; height: 300px; border:1px black solid;} #box2{ width:100px; height:100px; background:red; margin:auto auto;} 效果图如下： ** 我们可以用如下的方法实现： ** 1可以做到，但是box2需要固定大小 Document #box1{ width:300px; height: 300px; border:1
CSS实现居中对齐
Hling's Blog
09-10 2万+
Part1 水平居中的方案： 1.行内元素,可以设置text-align属性 text-align:center; 2.固定宽度块状元素，可以设置左右margin值为auto来使用 margin:0 auto; 3.不定宽度块状元素 a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto b:给该元素设置
每日知识总结
m0_73801853的博客
09-19 295
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
六种方式实现垂直居中
qq_45060976的博客
02-25 1260
六种方式实现垂直居中 使用table <table> <tr> <td>居中</td> </tr> </table> 利用div+table,可以利用css将div的diplay设置为table，使它拥有table标签的特性,再将里面的div的display设置为table-cell，将这个div变成td <div class = "table"> <div class = "td
水平/垂直居中详解
HTMl5自由者
05-03 1万+
.bc{margin-left:auto;margin-right:auto;} .pages1 li{float:left;display:inline;margin-right:5px;} .pages1 a{float:left;display:block;padding:0 9px; height:25px; line-height:25px;}
HTML让表格（table）居中与让表中内容居中
qq_50745337的博客
07-15 6545
HTML让表格（table）居中与让表中内容居中 1、在HTML中让表格在浏览器中左右居中，可以设置表格的align属性 align可以设置三个属性: 居中为center，靠左为left，靠右为right 我们只要在table中加入align="center"即可让表格居于网页左右方向的中间位置 如下： <table align="center" border="1" id="t1" style="width:600px;height:200px"> <tbody align="cen
表格标签 table标签 tr标签 单元格间距 单元格居中加粗 表单居中
你好牛蛙！
09-21 4119
table标签 table标签是表格标签 用这个可以创建一个表格 在标签中可以设置表格的相关属性 tr标签和td标签 一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格（一行中的一个元素） width hight是css样式 控制表的高和宽 borger标签 语法：border="1"可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽 cellspacing标签 语法：cellspacing="0"用来设置单元格间距 ""中的
居中(垂直)
qq_37720933的博客
03-02 403
最近开发中用到了很多居中的样式，做一个小小的总结，以备不时之需，总结以下几个垂直居中的方法 1，行内元素垂直居中 (1) height:100px;line-height:100px; 使行高和盒子高度相等，文字就会垂直居中 (2)display:table-cell;vertical-align:middle; 将div标签或者view标签，转换为tr td 标签，表格标签事实上是默认垂直居中 2，块级元素垂直居中 (1)position:relative;margin: auto 0;top:0;bo
常用的css将元素垂直居中的6种方法
01-08
常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height，可使单行文本垂直居中 例： div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下： ...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
CSS实现定位元素居中的方法
01-19
绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position:...
浮动后的li元素居中实现方法
12-09
复制代码代码如下: ”demo”> <ul> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> </ul> </div> 当做的是水平导航条时，有以下...
如何实现标签元素在HTML页面中居中显示
cnds123的专栏
12-15 3万+
在HTML页面设计中常常需要实现标签元素在HTML页面中居中显示，本文将介绍基本做法。
html中表格table的内容水平和垂直居中显示
热门推荐
xujing19920814的博客
03-27 13万+
html中表格table的内容居中显示 在CSS样式文件中指定#class td /*设置表格文字左右和上下居中对齐*/ { vertical-align: middle; text-align: center; } /*class 是所属的类*/ <div id="class" align="center" style= "margin: 0cm 0cm 0pt; te
如何让td中的文字居中？
爱米酱的博客
03-05 1万+
style="text-align:center"
java里面tr居中_有没有办法在java中使用tr ///(或等效的)？
weixin_42390092的博客
03-02 184
我想知道Java中是否有一个相当于tr ///(在Perl中使用).例如,如果我想用“密西西比”中的“p”替换所有的“s”,反之亦然,我可以在Perl中写#shebang and pragmas snipped...my $str = "mississippi";$str =~ tr/sp/ps/; # $str = "mippippissi"print $str;我可以想到在Java中这样做的...
tr合并、背景颜色渐变、圆角设置、div水平垂直居中
qq_43928864的博客
03-21 997
横性合并：<td colspan="2"></td> 纵向合并：<td rowspan="2"></td>
js判断数组中是否存在某个值的几种方法
weixin_45022563的博客
08-13 7万+
array.indexOf 判断数组中是否存在某个值，如果存在返回数组元素的下标，否则返回-1 let arr = ['something', 'anything', 'nothing', 'anything']; let index = arr.indexOf('nothing'); # 结果：2 array.includes(searchElement[, fromIndex]) 判断一个数组是否包含一个指定的值，如果存在返回 true，否则返回false。 参数：search..
行内元素水平垂直居中方法
最新发布
07-14
实现行内元素水平垂直居中的方法有多种，以下列举几种常见的方法： 1. 使用`text-align: center;`和`line-height`属性：将父元素的`text-align`属性设置为`center`，然后将行内元素的`line-height`属性设置为与父元素高度相等，这样就可以实现水平垂直居中。 ```html <div style="text-align: center; height: 200px;"> <span style="line-height: 200px;">居中文本</span> </div> ``` 2. 使用`display: flex;`和`align-items: center; justify-content: center;`属性：将父元素的`display`属性设置为`flex`，然后使用`align-items`和`justify-content`属性将子元素居中。 ```html <div style="display: flex; align-items: center; justify-content: center; height: 200px;"> <span>居中文本</span> </div> ``` 3. 使用绝对定位和负边距：将父元素设置为相对定位(`position: relative;`)，然后使用绝对定位(`position: absolute;`)将子元素居中，并通过负边距来调整位置。 ```html <div style="position: relative; height: 200px;"> <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">居中文本</span> </div> ``` 这些方法都可以实现行内元素的水平垂直居中，具体选择哪种方法可以根据实际情况和布局需求来决定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值