绝对定位下的垂直居中

最新推荐文章于 2023-10-30 20:10:04 发布
最新推荐文章于 2023-10-30 20:10:04 发布
阅读量421 收藏 1
点赞数 1
分类专栏： 大前端-html/css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jx950915/article/details/78106895
版权
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge chrome=1">
    <title>绝对定位下的垂直居中</title>
</head>
<style media="screen">
    .box{
        width:400px;
        height: 400px;
        margin:0 auto;
        border:1px solid grey;
        position:relative;
    }
    .box-center{
        position:absolute;
        width:200px;
        height: 200px;/*声明长宽*/
        border:1px solid red;
        text-align: center;
        line-height: 200px;
    }
    /*划重点 下面两个随便选一个*/
    /*.box-center{
        margin: auto;
        top:0;
        left:0;
        bottom:0;
        right:0;
    }*/
   .box-center{
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
   }


</style>
<body>
    <div class="box">
        <div class="box-center">
            我要垂直居中
        </div>
    </div>
</body>
</html>
效果

这里写图片描述

天空影
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将一个绝对定位的div水平垂直居中对齐
12-13
在通常情况下，可以为元素添加margin:0px auto即可让元素在它的父元素水平居中，然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效，所以说还是要用老办法实现。 代码示例如下:...
实现绝对定位元素水平垂直居中的两种方法
Yous的博客
06-19 4249
平时,用的方法即第一种方法是设置left,top值均为50%,同时margin-left设置为绝对定位元素width的一半取负,margin-top设为其height的一半取负。例如，绝对定位元素的width:100px;height:100px;代码如下:这是比较常用的一个方法，今天介绍一个巧妙的方法，是利用了绝对定位元素的自动伸缩的特性实现的。代码如下：上面就是第二种方法：设置margin:auto;设置left和right的值相等,top和bottom的值相等, 注意：left和right的值不能超过
【CSS】绝对定位元素设置 水平 / 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-12 5309
一、问题提出 二、绝对定位 居中设置 1、设置固定尺寸 2、先偏移50%再回退固定值 三、绝对定位元素 水平 / 垂直 居中
使用绝对定位实现居中的两种方法
ZQY1436556395的博客
05-21 2万+
方法一：1.左右居中（绝对定位） 先给父元素开启相对定位，再给子元素开启绝对定位，然后将子元素向左移动自己的50%，使子元素的中点与父元素的起点对齐，然后再将子元素向右移动父元素的50%，这样子元素和父元素的中心点就刚好重合了 <style> .box1{ width: 1000px; height: 50px; background-color: pink; position: relative; } .box2{ wid
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
luckychen81的博客
05-14 3529
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 我不是这种实现方法的第一人，可能这只是非常常见的一种小技术，我斗胆将其
绝对定位水平垂直居中
小阿兜的博客
05-29 2254
<style> .box { position: absolute; /* 1. left 走 50% 父容器宽度的一半 */ left: 50%; /* 2. margin 负值 往左边走 自己盒子宽度的一半 */ margin-left: -100px; top: 50%; margin-top: -100.
绝对定位元素的水平垂直居中的方法（3种任选）
01-21
1.css实现居中 缺点：需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: ...
使用绝对定位+负外边距让DIV层水平垂直居中页面
09-25
在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的，这里使用绝对定位+负外边距的方式来实现垂直居中，需要的朋友可以参考下
CSS定位“十字架”之水平垂直居中
12-13
本文为大家分享了CSS定位“十字架“之水平垂直居中效果的实现方法，具体内容如下 1.先看要实现的效果 实际的效果图 可以看到我的实现过程是先使用一个父级的div来定位水平垂直居中，然后再父级的div中定位出两个...
CSS 垂直居中的七种方法——史上最详细总结
热门推荐
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
【CSS】实现div块上下左右居中对齐的5种方式
最新发布
weixin_45620943的博客
10-30 4279
以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。
绝对定位实现上下左右居中
qq_44255146的博客
12-06 1088
绝对定位实现上下左右居中 position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50%);
绝对定位元素水平垂直居中的两种常见方法
weixin_33686714的博客
08-23 189
一、负外边距 方法：绝对定位元素的尺寸已知，top设置为50%，left设置为50%，外边距margin取负数，大小是宽度width和高度height的一半，有内边距padding时要加上padding值再取半。具体代码如下： html代码： <div class="box"> <div class="box1"><...
div绝对居中的六种方法
YuzuruHa的博客
05-21 5874
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一:绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: absolute; left:50%; top:50%; transform: tr.
绝对定位垂直水平居中方法
qq_63611169的博客
11-21 1043
分享一个绝对定位垂直水平居中方法
绝对定位display:absolute如何实现垂直居中？
Qlly
03-11 4939
首先设置一个父元素（.parent）和一个子元素（.child）的样式。 CSS代码： .parent { position: relative; width: 200px; height: 200px; background-color: #eee; } .child { width: 70px; height: 70px; position: absolute; back...
绝对定位后，利用margin进行水平或垂直居中的方式以及原理
weixin_43163281的博客
01-11 1585
在使用绝对定位后，我们经常会利用绝对定位和Margin进行水平居中。 假设盒子宽80px，高100px 1绝对定位后的水平居中方法：{ position：absolute； top：50%； left：50￥； margin-top：-50px； margin-left：-40px； } 定位方法是使用绝对定位让盒子在父元素中下移父盒子高度的一半，再利用margin方法将盒子上移负的自己宽度一半。注意，由于绝对定位后的盒子脱离文档流，对其使用margin是相对自身进行移动。 假设盒子宽度为width，高度为
css实现垂直居中的几种方式
康一夏忙中偷闲的日子
09-28 1万+
css布局 实现垂直居中的几种方式一、单行元素垂直居中二、对文本进行垂直居中三、对已知高度块级元素进行垂直居中四、对未知高度块级元素进行垂直居中 <div class="parent"> <div class="content">内容垂直居中</div> </div> 一、单行元素垂直居中 1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中 2、针对行内元素，可通过设置vertical-align: middl
让绝对定位的元素，实现居中的三种办法
tianfangf的博客
02-13 9441
一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是：1，先向右，向下移动百分之50，然后在利用margin减去自身宽度的一半（这个一定不能忘了减去哦，负值） .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; marg...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值