文本和盒子的水平 垂直居中 (18种方法)

已于 2022-09-22 23:18:30 修改
阅读量1.5w 收藏 83
点赞数 9
文章标签： html5 jquery echarts css vue.js
于 2022-04-08 16:16:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52301431/article/details/124020927
版权

目录

一、水平居中：

1、（子元素居中）父：text-align：center；（行内元素）

2、（自己居中）自己：margin：0 auto；（块级元素）

3、（子元素居中）（子）display:inline-block;  （父）text-align：center； （多块级元素）

4、（子元素居中）（父）display：flex；justify-content:center; 

二、垂直居中：

1、（inline-  ）单行文本自己：line-hight：盒子高度；

2、利用表：

 3、flex换主轴的方式：父元素：display：flex；flex-direction:column;justify-content:center; 

4、精灵元素：在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐

 5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半

 6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%

三：水平垂直居中：

1、父相子绝 + margin   （已知子元素高度）：宽高各移一半

 2、父相子绝 + transform 移动  （未知子元素高度）

 3、利用flex，主/纵轴都设为center

4、用flex：  弹性盒子+margin：auto；

 5、屏幕上

6、父相子绝 + margin: auto; 上下左右：0；

7、padding+margin-top:（父height-子heigh）/2

8、利用grid  （兼容性较差，不推荐）

一、水平居中：

1、（子元素居中）父：text-align：center；（行内元素）

文本在盒子中水平居中：text-align：center； （用于inline、inline-block、inline-table、inline-flex）

2、（自己居中）自己：margin：0 auto；（块级元素）

盒子在父盒子中水平居中：margin：0 auto； （用于block）

3、（子元素居中）（子）display:inline-block;  （父）text-align：center； （多块级元素）

子元素们：display:inline-block;   父元素：text-align：center；   (如果一行中有两个及以上的块级元素，将父元素设text-align)

4、（子元素居中）（父）display：flex；justify-content:center; 

多块级元素水平居中：父元素：display：flex；justify-content:center; 

二、垂直居中：

1、（inline-  ）单行文本自己：line-hight：盒子高度；

2、利用表：

 3、flex换主轴的方式：父元素：display：flex；flex-direction:column;justify-content:center; 

4、精灵元素：在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐

  <head>
      <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d1::before {
            content:"";
            display: inline-block;
            height: 100%;
            width: 1%;
            vertical-align: middle;
        }
        .d2 {
            width: 100px;
            height: 50px;
            background-color: pink;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

 5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半

子元素 绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半 （块级元素）

<head>
     <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d2 {
            position: absolute;
            width: 100px;
            top:50%;
            height: 100px;
            margin-top:-50px;
            background-color: pink;

        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

 6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%

子元素 绝对定位元素距离顶部50%，并用transform属性向Y轴反向偏移50%（部分浏览器存在兼容性问题）

<head>
    <style>
        .d1 {
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
        .d2 {
            position: absolute;
            width: 100px;
            top:50%;
            transform: translateY(-50%);
            background-color: pink;

        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

三：水平垂直居中：

1、父相子绝 + margin   （已知子元素高度）：宽高各移一半

margin-left  和 margin-top  分别是宽高的一半

        .fa {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
        }
        .son {
            width: 100px;
            height: 50px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -25px;
        }   


    <div class="fa">
        <div class="son"></div>
    </div>

 2、父相子绝 + transform 移动  （未知子元素高度）

x和y轴各移动宽高的百分之50%

 .div1 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }
        .div2 {
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

<div class="div1">
    <div class="div2">
    </div>
</div>

 3、利用flex，主/纵轴都设为center

  .d1 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: flex;
            justify-content: center;  /*主轴 */
            align-items: center;      /*纵轴 */
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

4、用flex：  弹性盒子+margin：auto；

        .fa {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: flex;

        }
        .son {
            width: 20px;
            height: 20px;
            background-color: pink;
            margin: auto;

        }
    <div class="fa">
        <div class="son"></div>
    </div>

 5、屏幕上

此方法十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

 

6、父相子绝 + margin: auto; 上下左右：0；

（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）

       .fa {
            width: 500px;
            height: 500px;
            background-color: purple;
            position: relative;
        }
        .sn {
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            （如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）
        }

    <div class="fa">
        <div class="sn"></div>
    </div>

7、padding+margin-top:（父height-子heigh）/2

        .fa {
            width: 500px;
            height: 400px;
            background-color: red;
            box-sizing: border-box;
            padding-top: 1px;   /*不写这个的话，无法垂直居中，因为父 子元素之间没有任何东西，会外边距合并，可以用padding-top和box来解决，更多解决方案在盒子模型里  */
        }
        .son {
            width: 300px;
            height: 200px;
            background-color: blue;
            margin: 0 auto;
            margin-top: 100px;
        }
 
    <div class="fa">
        <div class="son"></div>

8、利用grid  （兼容性较差，不推荐）

<head>
    <style>
        .d1 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            display: grid;
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">as</div>
    </div>
</body>

垂直水平居中：


1、position+tranform
.fa {
    positon:relative;
}
.son{
    position:absolute;
    left:50%;
    right:50%;
    transform:translate(-50%,-50%)
}

2、postion+margin:宽高各移一半
.fa{
    position:relative;
}
.son{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-父元素宽度的一半px；
    margin-top:-父元素高度的一半px;
}

3、margin-top:（父height-子heigh）/2
.fa {
    box-sizing:border-box;
    padding-top:1px;
}
.son {
    margin:0 auto;
    margin-top:（父height-子heigh）/2

}


4、positon+margin
.fa{
    positon:relative;
}
.son{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}


5、flex
.fa {
    display:flex;
    justify-content:center;
    align-items:center;
}

6、flex+margin:auto
.fa {
    display:flex;
}
.son{
    margin:auto;
}
 

爱喝牛奶~
关注
  • 9
    点赞
  • 踩
  • 83
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【盒子水平垂直居中的三种（四种）方式】
weixin_52452081的博客
04-17 1612
父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%margin: auto;和 margin-top:;/* 相当于父盒子高度的50% *//*相对于父盒子宽度的50%*//*向上走回自身高度的一半*//*向左走回自身宽度的一半*//* 距离上侧150px *//* 距离左侧300px *//* x轴居中 *//* y轴居中 */
文本在盒子里垂直居中 css
weixin_38355349的博客
09-12 1964
1. 已知父级宽高并且文本比较简短 .outline0{ width:200px; line-height:200px; text-align:center; background:#ccc; } <div class="outline0"> <span>test</span> </div> 2.转换元素的类型 vertical-...
CSS 居中方案全解析：水平居中与垂直居中
最新发布
My_wife_QBL的博客
07-08 733
CSS 提供了多种居中方案，无论是水平居中还是垂直居中，都有多种实现方法。本文详细介绍了几种常见的水平居中和垂直居中方案，并分析了它们的优缺点。在实际开发中，选择哪种居中方案取决于具体的需求和场景。希望本文能够帮助你更深入地理解 CSS 居中方案，并在实际开发中灵活运用这些知识，提升网页设计的质量和效率。无论是简单的文本居中，还是复杂的布局居中，通过掌握这些居中技巧，你可以轻松应对各种居中需求，打造出美观、稳定的网页布局。
文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中
热门推荐
muzidigbig的博客
05-23 3万+
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的&lt;td&gt;、&lt;t...
文本垂直居中_文本垂直居中
weixin_39962125的博客
11-30 3620
文本垂直居中，分为“单行”与“多行”文本两种情况，多行又分为“固定”与“不固定”高度两种情况，看下图效果。文本垂直居中1. line-heightheight 搭配 line-height 仅可实现单行文本垂直居中，不可用于多行文本。适用：单行文本.text1 { width: 200px; height: 100px; line-height: 100px; background: rg...
盒子中得文字居中
dingyu0064的博客
06-01 266
1. 转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/6928483.html
一行文字的时候，文字在整个盒子中垂直水平居中，超过一行之后，文字在盒子中垂直水平居中，文字左对齐...
ask04800的博客
04-11 564
在现实工作中，很多时候会有一些比较奇怪的需求，但即使是奇怪，但还是需要去实现。最近，在工作中，遇到一个需求，是这样的： 　　1、标题只有一行文字的时候，整个标题在一个div中需要垂直水平居中，文字也是居中对齐 2、当标题超过一行的时候，那么标题在这个div中需要垂直水平居中，但是文字变成了左对齐 根据如上描述，其实所用到的知识点也就那么几个: 1、未...
实现盒子水平和垂直居中的问题和解决方法
qq_53172414的博客
07-16 842
transform: translate,margin实现盒子水平和垂直居中的问题和解决方法
CSS02_设置盒子水平+垂直居中 & 设置文本水平+垂直居中
linxwx的博客
02-22 9369
写在前面：让div中文字水平居中：text-align: center; 方法1. 在不知道div的宽高的情况下 采用absolute绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，便可达到水平+垂直居中效果 .center { position: absolute; top: 50%; left: 50%; /*-webkit
CSS盒子与文本水平垂直居中
m0_53016870的博客
04-05 1047
一、文本水平垂直居中 二、盒子水平垂直居中 1.外边距 2.定位 3.平移 分割线---------------------------------------------- 一、文本水平垂直居中 line-height = height 文本垂直居中 text-align:center 文本水平居中 显示效果 <style> .box1{ /* 元素左浮动 *...
盒子水平垂直居中的11种方案
weixin_44160385的博客
09-24 372
1、定位+margin拉回 <style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute;
css多行文本垂直居中
09-27
css 多行文本垂直居中显示，兼容各大浏览器！
2021-05-12 设置文本和子盒子垂直居中的方法汇总
GAARA
05-12 272
1.文本垂直居中 1.1.单行文本垂直居中 行高=盒子高度 div { width: 300px; height: 150px; border: solid; /*设置水平居中*/ text-align: center; /*设置行高等于高度,可以让div中的单行文本垂直居中*/ line-height: 150px;
实现文字水平垂直居中
月来better
06-24 406
如何实现文字的水平垂直居中，话不多说直接上代码 ^^ 第一种方式 补充：当用text-align:center时，达到的是水平居中的效果，那再用vertical-align：middle；其实是实现不了垂直居中的，此时就需要用到display：table-cell去协助达到垂直居中的效果。 第二种方式 补充：text-align:center实现的是水平居中的效果，line-height高度要跟其元素设置的高度等同的情况下，才可以达到垂直居中的效果。 以上两种方式均能达到水平垂直的效果，效果图如下：
关于文本水平垂直居中的一般方法
diji9092的博客
07-06 184
下面是一些比较常用的居中方法。 水平居中 1.行内元素：自身 text-align:center。 2.行内块元素：父亲text-align:center。 3.块级元素：自身 margin:0 auto。 垂直居中 1.单行文本：line-height 和父亲的 height 一致。 2.多行文本：父亲元素 display：table ，将文本放在一个子d...
盒子水平居中的方法
weixin_41218855的博客
04-18 667
1、使用margin:0 auto; 2、使用margin左右边距 3、先让盒子左移父盒子的一半，再用变形或者定位把子盒子右移子盒子的一半 4、把盒子换成行内块元素，然后用text-align属性使盒子水平居中 ...
文本垂直居中实现方法
蓑笠翁
02-02 4997
  大家都知道css中使文本等元素水平居中的最常用的方法就是设置父盒子text-align: center;子盒子margin: 0 auto; 即可；而目前垂直居中没有看到说明最常用的做法，现在我们给出实现元素垂直居中的几个方法； 方法一：line-height;   这应该是我目前知道实现垂直居中最简单实用的方法；对于只有单行文字的，可使用该方法实现文本垂直居中；只需要在父容器中设置linline-height与height相等即可： .parent-box { height: 200p
text文字垂直居中_小程序文字居中
weixin_39667652的博客
12-10 5635
假如我们要居中的是一个text正常情况下，我们只需要给他一个text-align：center然后给他个view框架给view设个样式display：flex//导入弹性布局flex-direction：column//方向为垂直align-items：center//垂直居中justify-content：center//水平居中有的时候呢，我们的新手小朋友们可能会遇到这样的问题就是垂...
盒子水平居中实现方法
luckypian
06-25 4283
方法一：外边距(margin) 1.必须给盒子设置宽度； 2.盒子设置外边距margin:0 auto。（上下外边距为0） 注:行内元素或行内块元素若想水平居中，给父元素设置text-align:center。 方法二：绝对定位 ①元素水平垂直居中 1. 对该元素设置绝对定位； 2. 设置left:50%; 当前参考物宽度的一半; margin-left: -小盒子宽度的一半； 3. 设置top:50%;当前参考物高度的一半;margin-top:-小盒子高度的一半。 ②元素水平垂直居中 1. 对该元素设置
css盒子垂直居中的几种方法
05-30
有多种方法可以实现 CSS 盒子的垂直居中，以下是其中几种常用的方法： 1. 使用 flexbox 布局 ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 使用绝对定位和负边距 ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用 table-cell 属性 ```css .container { display: table-cell; vertical-align: middle; } ``` 4. 使用 line-height 属性 ```css .container { height: 100px; /* 确定容器高度 */ line-height: 100px; /* 确定文本行高等于容器高度 */ text-align: center; } ``` 这些方法各有优缺点，可以根据具体情况选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值