css 利用 position + transform 实现弹性盒子横向纵向居中

最新推荐文章于 2022-07-31 16:27:03 发布
最新推荐文章于 2022-07-31 16:27:03 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： css 实际应用 文章标签： css布局 横竖居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/111385825
版权
本文介绍了如何使用CSS的position: absolute和transform: translate(-50%, -50%)结合，来实现宽高不确定情况下元素的横纵向居中。这种方法通过将父元素和当前元素的中点对齐，确保了元素的居中效果。" 81182095,7640486,使用numpy进行数组求和,"['numpy', '数组操作', '矩阵运算']
摘要由CSDN通过智能技术生成

前端常有"横竖居中"的需求, 固定宽高的还好办
遇到宽高不确定的情况, 我向大家推荐下面这个方法

原理其实就两点

  • position: absolute; 的百分百参照父元素
  • transform: translate(-50%, -50%); 的百分百参照当前元素

position 和 transform 合起来的效果就是把父元素和当前元素的中点对齐, 从而达到居中的效果

demo

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset
最低0.47元/天 解锁文章
352328759
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3立方体实现方式（position+transform）
KOYAANISS的博客
03-07 232
1.创建立方体所需要的六个面； html代码 <ul class="cubic"> <li>第1个面</li> <li>第2个面</li> <li>第3个面</li> <li>第4个面</li> <li&g...
让盒子居中的三种方式
m0_62351434的博客
01-07 1127
demo结构如下 <div id="box"> <div id="x"></div> </div> 第一种:父相子绝 //子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%)最常用方法 #box{ width: 400px; height: 400px; background: red; positi
LOSER的课堂笔记之————弹性布局
qq_72174695的博客
07-31 335
弹性布局
弹性居中
besttoby01的博客
05-17 1074
    弹性居中布局.box{ display: flex; align-items: center; }可以用于表格，.box{ display: flex; } .item{ flex: 1; }弹性均分布局.box { display: flex; flex-direction: row; }从左向右排序.box { display: flex; flex-w...
position和transform的用法
weixin_51877075的博客
11-01 2208
POSITION CSS中我们想要改变一个元素的位置，我们可以采用的方法之一就是定位，这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位（top，left，right，bottom）来实现元素的移动。 TRANSFORM CSS3中提供了transform属性，其中的translateX和translateY值可以实现元素的横向与纵向移动。 区别和选择 经过测试。TRANSFO
CSS3手机移动端上下左右居中特效代码
03-20
本文将详细讲解如何利用 CSS3 实现手机移动端的上下左右居中特效，以及涉及到的关键知识点。 首先，我们要理解移动端屏幕的特性。手机屏幕通常具有横向和纵向的滚动，因此我们需要考虑元素在不同方向上的居中。CSS3...
DIV+CSS经常用到的属性、参数及说明
10-30
- `background-repeat`: 控制背景图片的重复方式，`repeat`、`repeat-x`和`repeat-y`分别表示横向、纵向和不重复。 - `background-position`: 定义背景图片的位置，如`center top`表示水平居中垂直顶部。 4. **...
css语法大全
04-04
- `repeat`: 横向和纵向重复。 - `repeat-x`: 只在X轴重复。 - `repeat-y`: 只在Y轴重复。 - **滚动** (`background-attachment`): 控制背景图像是固定还是随内容滚动。 - `fixed`: 背景图像固定。 - `scroll`:...
css入门笔记
05-15
默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸 属性：background-size: 取值： 1.width hegiht 2.width% height% 3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 ...
CSS参考手册
08-05
6. **background-repeat**: 控制背景图像的重复方式，例如横向重复、纵向重复或不重复。 #### 二、CSS边框属性（Border和Outline） **边框属性**用于定义元素边界的样式，包括颜色、宽度和样式等。 1. **border**...
CSS 元素居中的三种方式
icon_Lx的博客
09-08 189
如何让一个元素在父元素中上下居中？ 方法1.：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）（最常用方法） 方法二：父元素设置成弹性盒，子元素横向居中，纵向居中。 方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。 ...
position定位+transform形变，背景图前居中标题。
Arthur__Wong的博客
07-22 411
html代码： <div class="main"> <img src="运动跑.png" alt=""/> <h1 class="bigTitle">this is a img</h1> <p class="smallTitle">--- How ---</p> ...
position和transform使元素居中的方法 (转载)
web前端学习总结
09-28 1万+
position和transform使元素居中的方法 (转载) 1. position &amp; transform: translate(-50%, -50%) 实现块元素百分比居中 css3: .parent { positioin: relative; } .child { positioin: absolute; top: 50%; left: 50%; transf...
web前端开发技术储久良第三版_web前端开发技术学习 -CSS flex布局
weixin_39676242的博客
12-10 191
Flex布局详解传统的网站中，布局的解决方法都是通过盒模型来控制，依赖Display,float,position来进行实现的，虽然可以解决大部分的布局情况，但是一些比较特殊的布局实现起来就存在问题了，比如我们常见的垂直居中，因此Flex就被制造出来了，随着时间的考验，flex慢慢的被浏览器和开发者接受。可以非常简单的响应各种页面布局。Flex是什么Flex称之为弹性盒子，能够给盒子模型提供更加强...
position: absolute 与 transform 来居中块级元素的问题
weixin_44794662的博客
03-18 317
position: absolute; top: 50%; left:50%; -webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -...
css中absolute使用，用position和transform是div里面的div垂直居中
hanghangde的博客
01-22 5311
我以前看的一本书上是这么写的如果一个div的position属性为absolute那么这个div不会受页面的其他元素影响，直接基于页面定位这是错误的。看w3c，用google查positon absolute ,别用百度翻译的不准。介绍网址点击打开链接  其中一句话 absolute The element is positioned relative to its first
使用transform使定位元素居中
神膘护体小月半的博客
11-16 9154
1.1水平居中 下面举一个例子，父元素里面有一个子元素。 子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。 子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。 因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transfo..
css 几种水平垂直居中的方法 及 弹性盒子
热门推荐
青梅煮酒论英雄的博客
06-29 1万+
弹性盒子；
css3弹性盒子居中总结1
wmeng13的博客
06-14 4066
弹性盒子横轴居中例子： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&quot
DIV+CSS实现绝对定位水平垂直居中与实例解析
在网页设计中，"DIV+CSS水平垂直居中"是一个常见的布局技巧，它利用HTML的`<div>`元素和CSS样式来实现元素在页面上的精准定位。水平居中通常通过设置`position`属性为`absolute`，然后利用`left`和`right`或`margin-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值