10种盒子垂直水平居中方案.

最新推荐文章于 2024-08-12 21:44:16 发布
最新推荐文章于 2024-08-12 21:44:16 发布
阅读量68 收藏
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48341237/article/details/119117690
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        /* 1.已知父子宽高，使用margin：0 auto；水平居中，再用margin移回自己高度的一半 ，
        父元素必须有边框*/
        .fu1{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid blue;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            margin: 0 auto;
            margin-top: 50px;
        }
        /* 2.已知父子宽高，使用transform平移 */
        .fu2{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            margin-top: 10px;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color:darkgreen;
            transform: translate(50px,50px);
        }
        /* 3.已知父子宽高，子绝父相，子元素通过绝对定位进行居中 */
        .fu3{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            position: relative;
            margin-top: 10px;
        }
        .son3{
            width: 100px;
            height: 100px;
            background-color:darkmagenta;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        /* 4.父元素只有宽度没有高度，子元素宽高已知，垂直方向通过padding设置，水平方向margin：0 auto */
        .fu4{
            width: 200px;
            background-color: #ccc;
            margin-top: 10px;
            padding:50px 0;
        }
        .son4{
            width: 100px;
            height: 100px;
            background-color:darksalmon;
            margin: 0 auto; 
        }
        /* 5.父级元素必须有边框，通过给子元素设置相对定位偏移父级的50%之后，
        使用margin移回自己的一半宽高 */
        .fu5{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            border: 1px solid red;
            margin-top: 10px;
        }
        .son5{
            width: 100px;
            height: 100px;
            background-color:rgb(80, 36, 121);
            position: relative;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
        /* 6.通过给子元素设置相对定位偏移父级的50%之后，通过transform移回自己的50% */
        .fu6{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            /* border: 1px solid red; */
            margin-top: 10px;
        }
        .son6{
            width: 100px;
            height: 100px;
            background-color:darkgoldenrod;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .fu7{
            width: 200px;
            height: 200px;
            background-color: #ccc; 
            margin-top: 10px;
        }
        /* 7.通过给子元素前面添加一个高度为父级元素一半的子元素，再
        使用margin移回高度的一半，水平方向使用margin：0 auto居中。 */
        .son71{
            /* width: 100%; */
            height: 50%;
        }
        .son7{
            width: 100px;
            height: 100px;
            background-color:indigo;
            margin:0 auto;
            margin-top: -50px;
        }
         /* 8.通过将父元素设置为弹性盒子，使用justify-content水平居中，
        align-items垂直居中，子元素有无宽高均可 */
        .outter1{
            width: 200px;
            height: 200px;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        /* .inner1{
            width: 100px;
            height: 100px;
            background-color:lawngreen;
        } */

        /* 9.使用display:table-cell让元素以表格单元格的形式呈现，
        使用vertical-align实现垂直居中 ,再通过给子元素设置margin：0 auto；实现水平居中*/
        .outter2{
            
            width: 200px;
            height: 200px;
            background-color: #ccc;
            display: table-cell;
            vertical-align: middle;
            /* margin: 0 auto;
            border:1px solid transparent; */
        }
        .inner2{
            width: 100px;
            height: 100px;
            background-color:lightcoral;
            margin: 0 auto;
        }
        /* 10. flex布局+子元素设置margin：auto； */
        .outter3{
            margin-top: 10px;
            width: 200px;
            height: 200px;
            background-color: #ccc;
            display: flex;
        }
        .inner3{
            width: 100px;
            height: 100px;
            background-color: turquoise;
            margin: auto;
        }
    </style>
</head>
<body>
    <!--  1.-->
    <div class="fu1">
        <div class="son1"></div>
    </div>
    
    <div class="fu2">
        <div class="son2"></div>
    </div>
    <div class="fu3">
        <div class="son3"></div>
    </div>
    <div class="fu4">
        <div class="son4"></div>
    </div>
    <div class="fu5">
        <div class="son5"></div>
    </div>
    <div class="fu6">
        <div class="son6"></div>
    </div>
    <div class="fu7">
        <div class="son71"></div>
        <div class="son7"></div>
        
    </div>
    <div class="outter1">
        <!-- <div class="inner1"></div> -->
        <span>我是span</span>
    </div>
    <div class="outter2">
        <div class="inner2"></div>
    </div>
    <div class="outter3">
        <div class="inner3"></div>
    </div>
</body>
</html>
尔尔er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习（2075）：计算属性的基本使用
歌谣的博客
08-27 406
<!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"> <title&gt...
盒子水平垂直居中的11种方案
weixin_44160385的博客
09-24 364
1、定位+margin拉回 <style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute;
盒子垂直居中和水平居中的方法总结（第四天）
weixin_41984072的博客
02-16 223
一盒子垂直居中的方法 1.先让盒子的上下边缘和父盒子的水平中心线重叠，然后再让子盒子往回移动自身的一半距离。 2.使用表格的vertical-align：middle;display:table-cell;实现盒子垂直居中 3使用margin计算盒子的上下边距，使盒子居中 二盒子水平居中的方法 1.使用margin :0 auto; 2.使用margin左右边距 3.先让盒子左...
auto到底是什么意思？子盒子在父盒子内实现水平垂直居中的方法大全
weixin_54681929的博客
06-15 393
我们知道，块级元素即使设置了宽度，也会占满一行，为什么会这样? 因为默认的宽度规则是“适应于父级”规则（在水平方向上自动扩充）。即 margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right= width of containing block 对于绝对定位元素，有以下算式： left+margin-left+border-left-width+padding-left+widt
不定宽高盒子的垂直水平居中的方法
agzs70106的博客
08-21 1053
1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px;height: 500px; } .child { display: inline-block; } 2、 .containe...
盒子水平垂直居中最实用四种方法
swag_12581的博客
05-20 2471
已知宽高的方法(使用定位) 1.子元素必须绝对定位 2.子元素四个方向的对立方向数值相同（都为0） 3.再给子元素加 margin:auto 可以让子元素在父元素中水平垂直居中 .login { width: 100px; height: 100px; /* 绝对定位 */ position: absolute; /* 四个方向都为0*/ top: 0; right: 0; bottom: 0; right: 0; ..
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1348
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
文本和盒子的水平 垂直居中 (18种方法)
热门推荐
qq_52301431的博客
04-08 1万+
图片与盒子的基线： <div class="img"> <img src="" alt=""> </div> 给img设置了高度，div没有设置，就会出现div会大一些。 所以解决方法：给div加和img一样的宽度，或者hight：100% 图片和文字基线对齐： ............
垂直水平居中方案
德拉的分享
10-11 256
目录 CSS2两列布局 CSS2三列布局 CSS2三列布局之圣杯布局 CSS2三列布局之双飞翼布局 CSS2垂直水平居中问题 水平居中 垂直水平居中 CSS2两列布局 商品列 注意要给right开启BFC body{ min-width: 400px; } #left{width: 200px;height: 100px;background: pink;flo...
元素垂直水平居中几种方法
WaNgLu:)的博客
11-05 385
第一种：已知元素宽高，使元素水平居中 代码如下: #test{ width: 200px; height: 200px; background: pink; margin: 0 auto; text-align: center; line-height: 200px; } margin:0 auto 使元素水平居中，上下的外边距...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
CSS2.1如何让块元素垂直水平居中.rar
05-02
在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求，特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局...
CSS设置未知大小图片在已知大小容器水平垂直居中
09-25
接下来，要让图片在容器内水平居中，我们可以使用`text-align: center`属性。对于图片本身，设置`vertical-align: middle`以保持垂直居中。 ```css .box img { vertical-align: middle; } ``` 然而，这个例子中还...
3.2CSS 内容总结(二)盒子.md
02-16
- 对于行内元素或行内块元素，可以通过设置父元素的文本对齐方式为居中来实现水平居中（`text-align: center;`）。 **1.2 相邻块元素垂直外边距合并问题** 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的...
AngularJS 实现弹性盒子布局的方法
10-21
在前端开发中，布局设计是至关重要的，而弹性盒子（Flexbox）布局提供了一种更加灵活、响应式的解决方案。AngularJS作为一个强大的JavaScript框架，也可以很好地与Flexbox结合，实现动态和自适应的页面布局。本文将...
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1661
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 621
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
html实现funnel图
最新发布
Debug yourself!
08-12 653
这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。你还可以使用SVG（矢量图形）直接绘制漏斗图。// 使用刚指定的配置项和数据显示图表。// 初始化echarts实例。// 指定图表的配置项和数据。
Html详解——Vue基础
敲厉害的燕宝的博客
08-07 1163
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
CSS垂直居中与常见问题解决方案详解
`margin-left`和`margin-right`为`auto`可以水平居中，但前提是要设置`width`且元素为块级。对于行内元素，只需在其父元素上添加`text-align: center`即可。外边距合并现象指的是相邻块级元素的上外边距可能会合并为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值