盒子水平垂直居中的几种方式

最新推荐文章于 2021-11-23 15:52:43 发布
最新推荐文章于 2021-11-23 15:52:43 发布
阅读量203 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44838589/article/details/117719481
版权

  • 1、使用Flex属性主轴交叉轴都居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .wrapFlex{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .blockFlex{

        }
    </style>
</head>
<body>
    <div class="wrap wrapFlex">
        <div class="block blockFlex"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 2、Flex属性 + 子元素 margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .wrapFlex{
            display: flex;
        }
        .blockFlex{
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrap wrapFlex">
        <div class="block blockFlex"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 3、Flex属性 + 子元素 align-self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .wrapFlex{
            display: flex;
        }
        .blockFlex{
            align-self: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="wrap wrapFlex">
        <div class="block blockFlex"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 4、grid 布局 + 子元素 margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .wrapFlex{
            display: grid;
        }
        .blockFlex{
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrap wrapFlex">
        <div class="block blockFlex"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 5、 只使用 margin 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .allwrap{

        }
        .allblock{
            margin: calc(50% - 25px) auto;
        }
    </style>
</head>
<body>
    <div class="wrap allwrap">
        <div class="block allblock"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 6、绝对定位 position: absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
            position: relative; /* 子元素定位以此为基准 */
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .allwrap{

        }
        .allblock{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrap allwrap">
        <div class="block allblock"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 7、绝对定位 position: absolute + 动画 transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
            position: relative; /* 子元素定位以此为基准 */
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .allwrap{

        }
        .allblock{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="wrap allwrap">
        <div class="block allblock"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 8、表格属性 display: table-cell;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px; height: 100px;
            border: red solid 2px;
        }
        .block{
            width: 50px; height: 50px;
            background: #6c5ce7;
        }
        .allwrap{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .allblock{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="wrap allwrap">
        <div class="block allblock"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 9、当只有一行的时候，对里面的文字进行水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .online{
            width: 100px; height: 100px;
            background: #6c5ce7;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="online">123</div>
</body>
</html>

在这里插入图片描述

一段对白
关注
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1413
<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
一个盒子垂直水平居中的方法
qq_41865885的博客
10-20 165
flex方法 display：flex; justify-content:center; align-item:center; 定位 首先子绝父相，然后子级盒子的top：50%；left：50%；tranform:translate(-50%,-50%); margin margin:0 auto;
盒子的垂直水平居中方式
lyclyc_的博客
06-16 181
在html中盒子有很多种垂直水平居中的方式，这里只写一种自己想记忆的 1，需要了解2D转换中的transform:translate(x,y),元素从当前位置移动到给定的x轴和y轴的位置 给父盒子设置： position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 给子盒子设置宽高 下面插入一个例子 <!DOCTYPE html> <html lang="en"> <head>
盒子垂直水平居中方式总结
weixin_30618985的博客
01-28 173
盒子正常显示模式下效果： 怎么实现居中呢？ 1，粉红色盒子进行定位，子盒子绝对定位父盒子相对定位，top 、left各50%移动粉色盒子； 方式一：再减去盒子自身宽高一半，margin-top:-50px margin-left:-50px； 方式二：利用变形transform:translate,以盒子自身的高宽进行移动距离计算特点； 1 <!DOCTYPE html&...
盒子垂直水平居中
yshusencsdn的博客
08-03 252
盒子水平垂直居中
盒子水平垂直居中----3种方法
dgq2739710006的博客
06-02 301
我用的三种方法，当然常用的还是通过弹性盒来实现，一般用于移动端的时候，另外两种也可以，但在移动端使用弹性盒更方便，直接上代码了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
详解html的几种水平垂直居中的方式（基础）
12-29
所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <p>d第一种 <!-css样式部分--> .Centered1{ background-color: #800070; ...
[css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1
08-04
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
盒子垂直水平居中的几种方法
qq_43477251的博客
09-13 169
一、定位 1、盒子宽高已知 <!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"> &l
盒子水平垂直居中的几种方法
weixin_45646245的博客
11-23 5745
第一种：盒子宽高 + margin 思路 ：上外边距为自身高度一半，左外边距为自身宽度一半： .box { width: 800px; height: 400px; border: 1px solid black; } .son { width: 400px; height: 200px; margin-top
实现盒子水平居中/垂直居中的方法
从入门到放弃_nys的博客
10-03 1717
盒子垂直居中/水平居中的方法）一、盒子水平居中1.margin: 0 auto;2.使用margin计算盒子左右边距3.定位实现4.盒子转为行内块元素，然后使用text-align属性二、盒子垂直居中1.定位实现2.使用表格的vertical-align: middle实现（借助display:table-cell）3.使用margin计算盒子上下边距 一、盒子水平居中 1.margin: 0 a...
盒子水平垂直居中的四种方式(详细总结)
小柠檬爱编程
01-16 658
盒子水平居中的四种方式 第一种 当子盒子有固定宽高的时候这样来使用 <style> .father{ width: 500px; height: 500px; background-color: #ccc; position: relative; } .child{ width: 2...
css盒子垂直水平居中方法总结
qq_38086247的博客
06-09 336
经常使用到嵌套盒子居中的问题，使用使用弹性局部解决，使用使用比例，很多都用得初始熟。 设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知） 水平居中:在div的position为relative（相对定位时有效，绝对定位无效） //盒子相对父盒子水平居中 margin: 0px auto ; // 2、不知道盒子长宽：垂直水平居中：top、right、bottom、left全为0...
实现盒子水平垂直居中的两种方式
qq_45587146的博客
12-10 503
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .
盒子垂直水平居中的七种方法
qq_34466755的博客
11-07 411
一、直接及算法 1. margin =（父盒子宽度 - 子盒子宽度）/ 2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&
常见的盒子垂直水平居中方法总结
weixin_58515255的博客
11-23 420
盒子的水平垂直居中
盒子垂直水平居中只有两种方式？？
fengya1112的博客
07-23 175
1.利用magin：auto方法 将盒子设置为margin，将其设置为绝对定位，给left，right，top，bottom值都设置为0 .box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 200px; height: 200px; margin: auto; back
css盒子垂直居中的几种方法
最新发布
06-06
在CSS中实现盒子的垂直居中是一项基本操作，但在不同的设计需求中，可能需要使用不同的方法。以下是几种常见的CSS盒子垂直居中的方法： 1.使用flexbox布局：使用display:flex和justify-content/align-items属性来设置盒子的垂直和水平居中。 2.使用绝对定位：首先将父元素设置为相对定位，然后将子元素设置为绝对定位。使用top和left属性通过计算来实现垂直和水平居中。 3.使用line-height属性：将子元素的line-height值和父元素相同，然后将子元素的display属性设置为inline-block或inline，就可以实现垂直居中。 4.使用translate属性：使用transform:translate(-50%,-50%)将元素向左和向上移动50%的宽度和高度，来实现垂直和水平居中。 5.使用表格布局：将父元素的display属性设置为table，子元素的display属性设置为table-cell，然后使用vertical-align属性来设置垂直居中。 以上是常见的CSS盒子垂直居中的方法，选择合适的方法可以根据设计需求和项目要求来决定。同时需要注意浏览器的兼容性和其他CSS属性的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值