CSS 让盒子垂直居中的几种方式

最新推荐文章于 2023-10-31 12:25:03 发布
最新推荐文章于 2023-10-31 12:25:03 发布
阅读量809 收藏 3
点赞数
分类专栏： 前端面试题 CSS 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011394526/article/details/107763575
版权
本文介绍了四种让CSS盒子垂直居中的方法：1) 设置行高等于盒子高度；2) 利用弹性盒子模型布局；3) 使用绝对定位结合transform属性；4) 通过绝对定位和margin: auto来实现。每种方法都详细讲解了实现过程。
摘要由CSDN通过智能技术生成

1.设置行高等于盒子高度

.div{
   
line-height=盒子高度;
}

2.弹性盒子模型布局

.div{
   
dipslay:flex;  //设置为弹性盒子布局
justify-content:center； //设置水平居中
align-content:center;  //设置垂直
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 如何让盒子垂直居中,css 盒子垂直居中
weixin_28942523的博客
08-04 2321
面试的时候经常会被问到这样一个题目：让一个元素中内容垂直居中怎么做。其实之前，我就会两种，line-height和table-cell，今天做项目，遇到了这个问题，就系统的查了一下，总结一下方法：1、line-heightdiv{height: 100px;line-height:100px;text-align:center;}这样就能让div中的文字水平垂直居中了2、display:table...
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1364
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
div垂直居中 css div盒子上下垂直居中
weixin_33695082的博客
03-18 243
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。 div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。 1、具体实例代码如下 &lt;!DOCTYPE html&gt;  &lt;h...
css使盒子垂直居中的方法
丰柏林的博客
08-12 1045
<!DOCTYPE html> <html> <head> <title>盒子垂直居中的方法</title> <style type="text/css"> /* 1.先让子盒子的上边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一半距离(父级相对定位，子级绝对定位) 2.使用表格的vertical...
CSS盒子垂直居中
MDCG99的博客
06-06 537
auto自适应，只对块级元素有用，对内联元素和内联块级元素无用。1.常用margin：auto 子绝父相。垂直方向的垂直居中不发生作用），此时子元素变为弹性子元素。（如果父元素使用了定位，则。弹性盒布局，给父元素设置。在已知子元素宽高的情况下。
css盒子上下左右居中
weixin_35750483的博客
01-05 1328
很简单，在盒子的样式中加入以下代码即可： display: flex; justify-content: center; align-items: center; 这样，盒子就会水平居中了。如果要垂直居中，可以使用 vertical-align: middle;。 如果你想让盒子居中，但是又不想使用flex布局，你可以使用绝对定位： position: absolute; top: 50%; l...
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
[css]盒子水平垂直居中的6种方法
热门推荐
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
[css]实现垂直居中水平居中的几种方式 - 霪霖笙箫 - 博客园1
08-04
"CSS 实现垂直居中水平居中的几种方式" CSS 中实现垂直居中水平居中的几种方式是非常重要的，以下是几种常见的实现方式： 1. 容器内（Within Container） 在容器内实现垂直居中水平居中可以通过设置容器的 ...
css的居中方式
qac的博客
12-07 322
1.css的居中方式 CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中 一、水平居中 1.行内元素(文本txt，图片img) text-align:center; 2.块级元素居中 01.确定宽度的块级元素(已知块状元素的width且width为固定值) 方法一:margin和width实现水平居中 .content{ width:200px; height:200px; margin:0 auto; }
css设置子盒子水平垂直居中（四种方式）
苦涩精灵的博客
10-20 339
css设置子盒子水平垂直居中（四种方式） 1. 使用绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } div { position: relative; width: 200px;
CSS3中如何让盒子实现水平和垂直居中
qq_51735681的博客
03-03 334
CSS3中如何让盒子实现水平和垂直居中： 这里给一个<div>父盒子和一个<p>子盒子作为研究对象，同时给一个行内元素<span>作为参考，代码如下： <body> <div> <p></p> </div> <span>123</span> </body> 先对div父盒子进行性质定义，代码如下： div {
CSS中盒子居中方式
m0_67311245的博客
03-10 534
基础样式版本 1，小盒子在大盒子中，使用margin值向四周进行上下左右移动 或者 大盒子使用padding值向内挤 2，使用移动 transform 使用子绝父相 小盒子设置绝对定位，大盒子设置相对定位 HTML <body> <div class="father"> <div class="son"></div> </div> </body> CSS .father { marg...
css 四种盒子垂直居中方式
04-01 3149
.center{ height: 400px; width: 400px; color: chartreuse; background-color: black; text-align: center; line-height: 400px; box-sizing: border-box; } .div1{ border:
CSS-盒子垂直居中-持续更新
东东爱编码博客
05-13 524
文章目录一、CSS-盒子垂直居中几种姿势1. 使用table-cell + vertical-align2. 使用inline-block + line-height3. 使用伪元素，inline-block元素特性4. 使用flex5. 使用grid6. 使用定位居中【absolute + transform】7. 使用定位居中【absolute + calc】8. 使用定位居中【absolute + 负margin】9. 使用定位居中【absolute + margin:auto】 一、CSS-盒子垂直
CSS盒子水平垂直居中方法集锦
m0_67805754的博客
04-23 9846
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 初始html结构及css样式如图所示: 页面初始渲染效果: 下面给div盒子设置样式,实现居中效果 方法一:利用定位+margin:auto来实现 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角): 子盒子设置宽高和margin:auto效果 实现原理:父级设置为相对..
css实现盒子居中方案-新手向
最新发布
Web面试那些事儿的博客
10-31 1066
盒子居中时ccs一个重要的知识点，常见的类型有不定宽高和定宽高的盒子居中，这里总结了几种常见的居中方法，便于新人学习。子盒子定位后会处于父盒子中心右下方，这时使子盒子向相反方向位移子盒子宽高的一半实现居中。相比一种方法transform始终平移盒子宽高的一半，盒子宽高的变化不影响盒子居中。最灵活的方式，只需让左右和上下方位的百分值相等，盒子的大小取决于百分值的大小。同方法一，但transform基于自身宽高位移，始终位移自身的一半。不限制盒子宽高，盒子会被挤到中间。代码最少，但子盒子不能有兄弟元素。
CSS 盒子垂直居中的两种方法
Leaf_xiaoMing的博客
08-09 898
方法1：
css盒子垂直居中的几种方法
06-06
以下是几种常见的CSS盒子垂直居中的方法： 1.使用flexbox布局：使用display:flex和justify-content/align-items属性来设置盒子的垂直和水平居中。 2.使用绝对定位：首先将父元素设置为相对定位，然后将子元素设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值