实现水平与垂直居中的五种方法

最新推荐文章于 2022-04-08 16:16:03 发布
最新推荐文章于 2022-04-08 16:16:03 发布
阅读量465 收藏
点赞数
文章标签： 面试 flex html 定位 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45633169/article/details/108973207
版权

思路一：使用flex
【1】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<style>
       .father {
           display: flex;
           height: 200px;
           width: 300px;
           justify-content: center;
           align-items: center;
           background-color: blue;
       }
</style> 

<body>
  <div class="father ">
           <div  class="son">
               这是一段测试文字
           </div>
  </div>
</body>

思路二：magin:atuo配合绝对定位实现水平和垂直方向居中

.father {
      width: 300px;
      height: 150px;
      background-color: #f0f3f9;
      position: relative;
    }

    .son {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #cd0000;
      margin: auto;
    }


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

思路三：在伸缩项目上使用margin:auto

  .father {
        display: flex;
        width: 300px;
        height: 150px;
        background-color: #f0f3f9;
    }

    .son {         
        margin: auto;
        background-color: #cd0000;      
    }
    
<div class="father">
    <div class="son">测试文字</div>
</div>

思路四：利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

.father {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: bLue;
    }

    .son {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        width: 80px;
        margin: auto;
        background-color: red;
    }
<div class="father">
    <div class="son"></div>
</div>

思路五：利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
注意：IE9不支持

.father {
        position: relative;
        width: 200px;
        height: 100px;
        background-color: bLue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: red;
    }

<div class="father">
    <div class="son">测试文字</div>
</div>
打工人打工混
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现文字水平垂直居中
jarisMA的博客
12-02 1604
canvas实现文字水平垂直居中 eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
元素水平垂直居中的几种方法
01-20
在网页布局设计中，元素的水平垂直居中是一项常见的需求，尤其在响应式设计和动态内容展示中显得尤为重要。本文将介绍四种不同的方法来实现这一目标，每种方法都有其适用场景和优缺点。 首先，我们来看第一种方法，...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex html <div class=parent> <div class=child></div> </div> css .parent{ width: 500px; height: 500px; margin: 0 auto; border: 1px solid gains
js实现盒子水平垂直居中
qq_42349528的博客
10-03 3175
假设我们不知道盒子的宽高 方法1：绝对定位 + transform中的translate。首先对子元素进行绝对定位，父元素进行相对定位，然后将子元素的左上角通过top:50%和left:50%定位到页面中央，最后通过translate来调整子元素的中心点到页面的中心。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局</ti
【前端】三种方法将文字垂直居中
Elane1027的博客
03-17 9404
本文用三种方法实现垂直居中 第一种方法针对单行文字，用line-height实现，即将行间距设置为高度的一半，但是当文字多行时，该方法无效。 第二种方法针对定高多行文字，用实现 第三种方法针对定高多行文字，用display：table实现 以下为代码（该代码实现了当鼠标放到左边的两个div上时，放大一倍，实现方法为在js中将对应的宽高都设置为2倍，并appendChild上去）
单行/多行文字垂直居中
weixin_42645716的博客
02-19 4187
转自：https://www.cnblogs.com/moqiutao/p/4807792.html 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： &lt;p style="border:1px solid red;width:600px;height:100px;line-height: 100px;"...
水平垂直居中（五种常用方法）
qq_41909079的博客
04-02 255
1./*父元素设置relative*/ /*子元素设置absolute,上下左右位置都为0,margin：auto*/ 2./*父元素设置relative*/ /*子元素设置absolute, 上50%；左50%；margin-top:自己高度的一半;margin-left:自己宽度的一半；*/ 3./*父元素设置relative*/ /*子元素设置absolute...
实现垂直水平居中的方法
lucaslow的博客
11-04 231
因为这一类型题目我面试的时候被问了很多遍，然后就想总结一下吧。大概分了几类。 html代码如下：<div id="parent"> <div id="child"></div> </div>其样式#container { width: 300px; height: 300px; background-color: #000;
实现水平垂直居中方法详情
weixin_43905830的博客
05-25 182
最近做项目时用到了水平垂直居中，一开始有些方法的使用情况还没搞透，就卡的头疼，今天就总结下。 实现水平居中 1、一般来说实现水平居中最好的办法当然就是margin:0 auto;当然要在宽度固定的情况下。 <style type="text/css" rel="stylesheet"> *{ margin: 0; padding: 0; } #box { width: 200px; height: 200px; marg
水平垂直居中实现方式总结
cwjxyp的博客
02-14 286
1、利用定位+margin:auto 父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会和父元素宽高相同，完全覆盖 这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了 <style> .father{ width:500px; height:300px; border..
实现水平垂直居中的几种方式
nn_nn_n的博客
08-29 190
CSS实现盒子模型实现水平居中 1.position + transform .box { width: 1000px; height: 500px; background: #eee; position: relative; } .content { width: 500px; height: 200px; background: pink; ...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
Android应用借助LinearLayout实现垂直水平居中布局
09-02
注意，为了实现水平居中，LinearLayout的宽度应当占据父容器的全部宽度，即`android:layout_width="fill_parent"`。 3. `android:layout_gravity="center_vertical"`：这使得LinearLayout在其父容器中垂直居中。...
文本和盒子的水平 垂直居中 (18种方法)
热门推荐
qq_52301431的博客
04-08 1万+
图片与盒子的基线： <div class="img"> <img src="" alt=""> </div> 给img设置了高度，div没有设置，就会出现div会大一些。 所以解决方法：给div加和img一样的宽度，或者hight：100% 图片和文字基线对齐： ............
css实现水平居中的几种方法,css实现水平垂直居中的几种方法
weixin_33410492的博客
08-03 423
笔记学习整理css垂直水平居中分为：定宽居中方法①absolute+负margin②absolute+margin:auto③absolute+calc④ min-height: 100vh+flex+margin:auto不定宽居中①absolute + transform②lineheight③writing-mode④css-table⑤flex⑥grid一、定宽居中1、定宽居中(absol...
实现水平垂直居中的五种方法
masterHuan的博客
08-05 399
水平垂直居中
实现垂直水平居中的五种方法
Judy_qiudie
09-23 1107
参考博客：https://blog.csdn.net/bury_/article/details/79430943 1.基于表格样式 将要使内容居中的外层容器元素的display设置成table，内层内容块使用table-cell，然后分别设置水平和垂直居中： /*表格方案*/ #table-father{ d...
【CSS】实现水平垂直居中的几种方法
ephemeral_x的博客
12-12 532
关于实现水平垂直居中的一些方法
实现元素水平垂直居中的方法
最新发布
05-11
使用绝对定位可以将元素相对于父元素进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值