子元素相对父元素垂直居中的8大方法，CSS面试题常考

最新推荐文章于 2024-04-23 20:50:55 发布
最新推荐文章于 2024-04-23 20:50:55 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： CSS 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangxueyou2223/article/details/124375504
版权 
<!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>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <style >
        #box{
              width: 300px;
              height: 300px;
              background-color: #f00;
        }
        #content{
              width: 50px;
              height: 50px;
              background-color: orange;
         }

    </style>
  </head>
  <body>
    <div id="box">
      <div id="content"></div>
    </div>
  </body>
</html>

 子元素相对父元素垂直居中的8大方法，CSS面试题常考，上面是基本代码样式，下面是方法整理如下，话不多说，肝着！

第一种方法: flex  css3的flex

#content{
  display: flex;
  justify-content: center;
  align-items: center; 
}

第二种方法 flex(父)+margin（子）

#box{
	display:flex;
}
#content{
	margin:auto;
}

第三种方法:定位方法 position + calc

#box{
  position: relative;
}
#content{
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

第四种方法：position + margin.

#box{
  position: relative;
  border: 1px solid red;/*防止垂直方向margin重叠*/
}
#content{
  margin-left: calc(50% - 25px);
  margin-top: calc(50% - 25px);
}

第五种方法 ：position + margin(2)

#box {
  position: relative;
}
#content{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}

第六种方法： position + margin(3)

#box{
  position: relative;
}
#content{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  margin: auto;
}

第七种 方法：position + transform

#box{
  position: relative;
}
#content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

第八种方法 ： lineheight(父) + display:inline-block(子)

#box{
  line-height: 325px;
  vertical-align: center;
  text-align: center;
}
#content{
  display: inline-block;
}

痴心阿文
关注
专栏目录
子元素相对父元素垂直水平居中的八种方式
技术无止境，人生仍探索。
07-27 596
基本样式 HTML <!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" />
子元素在父元素中垂直水平居中
不甜呐的博客
05-08 1599
主要介绍 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位法</title> <style type="text/css"> .parent{ width: 200px; height: 300px; background-color: skyblue; position: relative;
子元素如何在父元素中居中
A887337的博客
10-14 538
子元素如何在父元素中居中
让子元素在父元素中垂直居中的方法
A12536365214的博客
01-22 615
在这种方法中，通过将子元素的左上角放置在父元素的中心，然后使用 `transform: translate(-50%, -50%);表格布局的方式也可以实现垂直居中，但相对于 Flex 和 Grid 布局，这可能更为繁琐。使用 Flex 布局是一种简单而强大的方法，可以使子元素在父元素中水平和垂直居中。`用于同时水平和垂直居中。3. **使用绝对定位和 transform 属性：**1. **使用 Flex 布局：**2. **使用 Grid 布局：**4. **使用表格布局：**
让一个父元素中的子元素垂直水平居中的方法
精通前端技术，了解后端接口
03-08 535
在选择方法时，应综合考虑项目的具体需求、兼容性以及父元素和子元素的特性。在选择使用哪种方法时，请考虑你的具体需求和父元素、子元素的属性。例如，Flexbox 和 Grid 是现代布局的首选方法，因为它们提供了更大的灵活性和控制能力。在CSS中，有多种方法可以使子元素在其父元素中垂直和水平居中。当子元素的宽度和高度已知时，可以使用这种方法实现水平居中，但垂直居中需要结合其他技巧，比如使用。Flexbox 是现代网页布局中最常用的方法之一，它使得元素的布局和对齐变得非常简单。
子元素相对于父元素水平垂直居中的几种方法
weixin_45571121的博客
08-17 3951
方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） 1.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=d...
子元素相对于父元素垂直居中对齐
weixin_30868855的博客
10-16 477
记个笔记 1. 元素相对于浏览器居中 　　 <style> .window-center { /* 将position设置为fixed，使元素相对于浏览器窗口定位 */ position: fixed; /* 将margin设置为auto，使浏览器自动推算元素外边距 */ ...
css面试题.docx
10-06
CSS面试题大全 CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言，广泛应用于Web开发领域。本文总结了常见的CSS面试题，涵盖了CSS基础知识、布局相关、样式控制、选择器、css引入方式、动画...
html5css3面试题及答案,前端面试题及答案-CSS篇.docx
07-05
本文档提供了 HTML5/CSS3 面试题及答案，涵盖了 CSS 的新特性、选择符、盒模型、浮动、垂直居中等多个方面。 CSS3 的新特性 * 实现圆角（border-radius） * 阴影（box-shadow） * 文字加特效（text-shadow） * ...
CSS面试高频：让子元素在父元素里水平垂直居中
Z_J_Xx的博客
11-10 248
行内元素，块级元素如何垂直水平居中
300道HTML、CSS习题及面试题（含答案）
09-18
浮动常用于创建多列布局，清除用于解决浮动元素产生的父元素高度塌陷问题。 - 如何实现响应式设计？利用媒体查询（media queries）根据设备屏幕尺寸调整样式。 - CSS预处理器（如Sass、Less）有何优势？预处理器...
css子元素在父元素中水平垂直居中的几种方式(分享)
weixin_60547084的博客
01-14 1833
1. css子元素在父元素中水平垂直居中的五种方式 <!-- 这里html代码是统一的 --> <div class="parent"> <div class="child"> </div> </div> 2. 第一种，定位，margin: auto; .parent { position: relative; width: 800px; height: 600px; border: 3px solid steelblue;
子元素在父元素中水平和垂直居中的几种方法
usernameID007的博客
08-06 2443
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
怎么让子元素在父元素中水平垂直居中
chenlim87的博客
03-28 3020
第一种方法:使用绝对定位 此方法要求父元素要有高度,父元素开启相对定位,子元素开启绝对定位. 注意:如果父元素没有高度也没有开启相对定位,则子元素会相对于body水平垂直居中. 第二种方法:使用flex布局 在flex布局中父元素是子元素的容器,子元素是父元素的项目. 容器里设置的属性都是对于项目来说的, display:flex代表容器里的所有项目按flex布局, justify-conte...
CSS子块元素在父块元素水平垂直居中的几种方式
嘘...一只bug
03-06 1114
子元素在父元素中垂直水平居中的几种方式
面试必考15道CSS3基础面试题（含答案）
weixin_45819386的博客
04-26 6199
文章目录前言1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？2、box-sizing属性？3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？4.垂直居中几种方式有哪些？总结 前言 随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界
四种方法让子元素在父元素中水平垂直居中
Black_Straight的博客
06-03 361
四种方法让子元素在父元素中水平垂直居中
css设置子元素在父元素中水平垂直居中
最新发布
qq_39454432的博客
04-23 843
css设置子元素在父元素中水平垂直居中的方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值