盒模型垂直水平居中（开启定位）

最新推荐文章于 2022-10-03 21:32:54 发布
最新推荐文章于 2022-10-03 21:32:54 发布
阅读量145 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44552543/article/details/91398303
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        position:relative;
        width: 400px;
        height: 600px;
        background:pink;
        margin: 0 auto;
    }
    .inner{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left:-50px;
        margin-top: -50px;
        width: 100px;
        height: 100px;
        background: deeppink;
    }
</style>
<body>
<div class="wrap">
    <div class="inner">
        aaaaaaa<br>
        aaaaaaa<br>
        aaaaaaa<br>
        aaaaaaa<br>
    </div>
</div>
</body>
</html>

第二种方法
将inner的style改为
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
在这里插入图片描述

weixin_44552543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
盒模型和图片的垂直水平居中方法
qq_35165469的博客
10-31 358
1、盒模型垂直水平居中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ...
盒子模型水平垂直居中
weixin_42260782的博客
07-19 257
不是专业的前端还要干前端的活…虽然学过css，很久没写，都忘得差不多了 这两个view已经垂直居中了， 但是随着翻页，右边没数据的时候，左边会突然塌陷： 虽然知道一定是css的问题，但却无从下手， 两个view我用了一个bigbox嵌套： bigbox的css： .bigbox{ text-align: center; } <view class="bigbox"> <view class="guideul"> <view class="guide
CSS相关 | 盒模型 / 5个盒子水平垂直居中方案 / clientHeight,offsetHeight,scrollHeight...
qq_43248263的博客
12-11 906
CSS盒模型 概念：盒子模型就是用来装页面上的元素的容器，是矩形区域。 分类： -IE盒子模型(怪异盒子模型）：width=左右border+左右padding+content -W3C盒子模型（标准盒子模型）：width=content CSS3引入新属性：box-sizing：border-box、padding-box、content-box 盒子水平垂直居中方案（5个） 前提：子绝父相 父元素relative，子元素absolute 1.定位1 方法：假设盒子 width: 100px; hei
Css--实现盒模型水平垂直居中
ShIcily的博客
07-07 365
一、CSS实现盒子模型水平居中的方法 全局样式配置： .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000; } .child { width: 50px; height: 50px; ...
CSS盒模型的几种居中方式
weixin_53144068的博客
01-05 867
css实现盒子模型居中方式 <div class="parent"> <div class="child"></div> </div> 1.绝对定位 margin负值 .parent{ width:600px; height:600px; margin:auto; position: relative; background-color: #000; } .child{ width:200px;
css实现元素水平垂直居中常见的两种方式实例详解
09-24
在父元素上设置`display: flex`开启flex布局，然后通过`justify-content: center`和`align-items: center`分别设置水平和垂直居中。以下是一个完整的例子： ```html <!DOCTYPE html> , initial-scale=1.0"> ...
css实现移动端图片文字水平居中
09-24
2. 将`.container`设置为`display: -webkit-box`，开启老版Flexbox模式，并通过`-webkit-box-pack: center`使内容水平居中。 3. 为图片（`.icon`）和文字（`.username`）设置适当的`margin-top`，以调整垂直位置。 4...
CSS弹性盒模型flex在布局中的应用详解
09-24
这两个属性结合使用可以实现元素的垂直和水平居中。 2. **在伸缩项目上使用margin: auto**： - 当伸缩项目只有一个时，设置`margin: auto;`可以在主轴方向上自动分配剩余空间，实现居中效果。如果有多于一个伸缩...
DIV未知高度的垂直居中特效代码
03-20
3. **绝对定位和负外边距**：对于不支持新布局模型的老版浏览器，可以使用绝对定位和负外边距来实现垂直居中。设置父元素的`position: relative;`，然后让子元素的`position: absolute; top: 50%; left: 50%;`，最后...
css布局定位.zip
03-20
`来实现元素水平或垂直居中。 5. 弹性盒布局（Flexbox）：Flexbox是一种现代布局模式，适用于一维布局（行或列）。通过设置`display: flex;`，可以轻松实现元素的对齐、伸缩和换行。 6. CSS Grid布局：网格布局...
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
weixin_44211097的博客
09-19 339
CSS 实现盒子模型水平居中 水平居中效果图如下： HTML： CSS 全局样式： 方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候） 方法二：text-align + display（子盒子有或没有宽度的时候都适用） 方法三：position 定位（只适用于子盒子有宽度和高度的时候） 方法四：position + transform（子盒子有或没有宽高的时候都适用） 方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用） .
实现盒子水平居中/垂直居中的方法
从入门到放弃_nys的博客
10-03 1640
盒子垂直居中/水平居中的方法）一、盒子水平居中1.margin: 0 auto;2.使用margin计算盒子左右边距3.定位实现4.盒子转为行内块元素，然后使用text-align属性二、盒子垂直居中1.定位实现2.使用表格的vertical-align: middle实现（借助display:table-cell）3.使用margin计算盒子上下边距 一、盒子水平居中 1.margin: 0 a...
CSS盒模型垂直居中的方式（前提已知宽高情况下）
扬的博客
06-12 189
1.flex布局 .box{ height: 300px; width: 300px; border: 1px solid #000; margin: 50px auto; /* flex布局实现 */ display: flex; align-items: center; justify-content: space-around; } .box1{ width: 100px; height: 100px; background: #ccc; }
定位 宽度不确定 水平居中
qq_16591861的博客
07-12 449
height: 30px;     line-height: 30px;     position: absolute;     bottom: 126px;     left: 50%;     -webkit-transform:translate(-50%,-50%);     padding-left: 10px;     padding-right: 10px;
深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
E.C.的博客
05-28 5748
文本垂直居中方法比较常用，比如一定高度的盒子中，未知高度的盒子等常用于总结下文本垂直居中的以下方法： 　　1.单行文本垂直居中： 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：div{ height:25px; line-height:25px; } 　　2.（未知高度）多
CSS 布局-垂直居中-盒模型
好好学习天天向上
10-03 904
文档流是元素中文档流向，从上往下分成一行行的，块级元素从上至下、行内元素在每行中从左到右依次排放。块元素（block）独占一行，设置宽高生效，margin和padding的上下左右均对其有效常见块元素div、p、h1行内元素不独占一行,设置宽高不生效,margin上下无效常见行内元素span，img是行内元素，但具有行内块的属性,可以自由设置宽高。div和p的使用场景一般来说块级元素可以包含行内元素和块级元素，但是h1~h6、p内部只能包含行内元素，不能包含块级元素语义上，div。
盒子水平垂直居中常用的六种方法
Angel_Tears_的博客
08-09 8831
盒子水平垂直居中常用的六种方法,在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,方法一:利用定位 父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50% 有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会
关于盒子模型之 水平居中和垂直居中的问题
qq_52499703的博客
06-21 1085
在CSS布局中，水平居中与垂直居中一直是用到比较多的，在本篇中将介绍水平居中、垂直居中的几种方式。
盒子居中 方法
xtyxtyxtywq的博客
09-23 605
盒子居中 方法
css盒子模型水平垂直居中
最新发布
08-02
回答: 实现CSS盒子模型的水平垂直居中有多种方法。其中一种方法是使用position定位。在已知子盒子的宽度和高度的情况下，可以通过设置父盒子的position为relative，然后设置子盒子的position为absolute，并使用...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值