css实现盒子的水平垂直居中的三种方法

最新推荐文章于 2023-11-03 10:33:06 发布
最新推荐文章于 2023-11-03 10:33:06 发布
阅读量543 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryyzxf/article/details/108316837
版权

css实现盒子的水平垂直居中的三种方法

方法一

1.当使用position定位，margin-top、margin-left水平垂直居中时，先利用top:50%、left:50%将子盒子的左上角定位到父盒子的正中，然后使用margin-top:50%;margin-left:50%,完成。

//HTML、css
<style>
    /* * {
        padding: 0;
        margin: 0;
    } *//*去掉所有元素内外边距

    .father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }

    .son {
        position: absolute;
        /* margin-top: auto; */
        /*浏览器设置的上边距*/
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: purple;
        margin-top: -50px;
        margin-left: -50px; 
    }
</style>

<body>
<div class="father">
    <div class="son"></div>
</div>
</body>

方法二

2.利用transform:translate(x,y)

// HTML、css
<style>
    /* * {
        padding: 0;
        margin: 0;
    } */

    .father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
    }

    .son {
        position: absolute;
        /* margin-top: auto; */
        /*浏览器设置的上边距*/
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: purple;
        transform: translate(-50%, -50%);
    }
</style>

<body>
<div class="father">
    <div class="son"></div>
</div>
</body>

方法三

3.使用弹性布局（flex）

// HTML、css
<style>
    /* * {
        padding: 0;
        margin: 0;
    } */

    .father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .son {
        position: absolute;
        /* margin-top: auto; */
        /*浏览器设置的上边距*/
        width: 100px;
        height: 100px;
        background-color: purple;
        }
</style>

<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
谢去非
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1361
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
[css]盒子水平垂直居中的6种方法
热门推荐
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
CSS盒子水平垂直居中方法集锦
m0_67805754的博客
04-23 9844
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 初始html结构及css样式如图所示: 页面初始渲染效果: 下面给div盒子设置样式,实现居中效果 方法一:利用定位+margin:auto来实现 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角): 子盒子设置宽高和margin:auto效果 实现原理:父级设置为相对..
css 实现水平垂直居中的6这个例子
HHH917的博客
03-02 259
<div class="container"> <div class="inner"> </div> </div> 1.margin负值 .container { width: 400px; height: 400px; border: 2px solid #111; position: relative; } .inner { ...
如何使一个盒子水平垂直居中？（5类8种）
weixin_50517811的博客
11-03 2182
如何使一个盒子水平垂直居中？flex布局/grid布局/position布局/table布局/line-height
CSS实现div盒子水平垂直居中的方式
Zhou的博客
01-03 5435
网上看到有很多方式，这里记录一下我用起来顺手的几种方式，这里敲黑板做笔记，哈哈~~ &amp;lt;div id='container'&amp;gt; &amp;lt;div class='middle'&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; 首先预备工作，假设这是登录界面，那通常会涉及到背景图片撑满屏幕 &amp;lt;style&amp;gt
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0>...link rel=stylesheet href=center.css> </head> <body> <div class=son><
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
CSS实现盒子水平垂直居中的几种优雅方法
never_stop_study的博客
09-29 758
CSS实现盒子水平垂直居中的几种方法
css - 盒子水平垂直居中的几种方式
qq_43886365的博客
05-11 1235
前端div盒子水平垂直居中的几种方式: 使用子绝父相，利用css3新增`transform的translate`属性来进行垂直居中； translate可以同时传两个属性，第一个是水平方向移动距离，第二个是垂直方向的移动距离；translate中的%百分比相对的是自身的 ，也就是向左向上走自身的%50来实现居中效果；
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
weixin_30667649的博客
07-02 81
CSS 实现盒子模型水平居中 水平居中效果图如下： HTML： CSS 全局样式： 方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候） 方法二：text-align + display（子盒子有或没有宽度的时候都适用） 方法三：position 定位（只适用于子盒子有宽度和高度的时候） 方法四：position + transform（子...
如何让一个盒子水平垂直居中
m0_54104677的博客
02-28 233
让一个元素水平垂直居中
使用 CSS 实现盒子水平垂直居中的方法
火星基地
11-09 1783
原始代码： center.html： <!DOCTYPE html> <html lang="Zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center</title> <link rel="styleshe
如何用CSS实现水平和垂直居中
2302_77399030的博客
04-03 321
Flexbox（弹性盒子）是一个现代的、强大的布局模型，它可以轻松地实现水平和垂直居中。在这个例子中，我们将容器的display属性设置为flex，然后使用和属性分别设置水平和垂直居中。
CSS-盒子水平垂直居中的五大方案
weixin_43026567的博客
06-11 4254
文章目录定位：三种display: flexdisplay: table-cellJS实现 让.box在.wrapper中水平垂直居中。 HTML代码： <div class="wrapper"> <div class="box"></div> </div> 定位：三种 1. position：absolute 需要知道子盒子的具体宽高 2. margin: auto 需要子盒子有宽高，但不需要去考虑它的宽高是多少 3. css3新属性transfo
盒子垂直居中的三种办法
weixin_41218855的博客
04-18 5630
1、先让盒子的上下边缘和父盒子的垂直中心线重叠，然后再让子盒子往移动自身的一半距离 这其实有两种方法：第一运用定位 .father { width: 300px; height: 300px; border: 1px solid red; position: relativ...
使div盒子水平垂直居中的方法
周五星的博客
03-29 360
不固定和固定宽高的盒子垂水平直居中的几种方法 1.不固定宽高让盒子垂直居中有以下方法： 第一种：使用css 方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
CSS实现盒子水平垂直居中代码
最新发布
06-21
在CSS中，实现一个元素（通常是一个包含块或块级元素）在页面水平和垂直方向上居中的方法有很多种。以下是几种常见的技术： 1. **Flexbox** 方法： ```css .container { display: flex; justify-content: center;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值