只要三句话就可以实现不定宽高水平垂直居中。

最新推荐文章于 2023-06-05 09:38:20 发布

转载最新推荐文章于 2023-06-05 09:38:20 发布 · 389 阅读

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS实现子元素在父元素中水平垂直居中的简单方法：通过设置display属性为-webkit-flex，配合justify-content:center及align-items:center即可轻松实现。这种方法适用于现代浏览器，能够帮助开发者快速定位页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

昔人'

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Qt开发经验总结

草上爬的博客

12-02

1万+

增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。

各种页面常见布局+知名网站实例分析+相关阅读推荐

JanLEE

07-05

616

参与评论您还未登录，请先登录后发表或查看评论

css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

零一的博客

05-06

4156

css 几种常用的简单容易记住的垂直水平居中方法前言正文第一种方法：第一种方法我强烈推荐，用到了我们熟悉的flex布局。前言我们在设计网页时，会大量的运用到水平垂直居中，如果知道元素的宽高，那水平垂直居中是很简单的，无非是用一下margin就可以完成，但是，如果不知道元素的宽高呢？是不是就会在这上面用点心思了，接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧，放心绝对...

css实现div不定宽高垂直水平居中解决方案

LQL1990188的博客

04-20

290

　　　　在项目中我们经常能碰见然图片垂直水平居中，不定宽高的div垂直水平居中，等等~~ 　　　　现在我将介绍我所知道的几种用css来解决的几种方案。 1.父元素text-align:center;display:table-cell;vertical-align:middle;子元素display:inline-block; 　　 .parent{ text-align...

css3之transform属性实现div不定宽高垂直水平居中

LQL1990188的博客

05-24

538

transform的作用 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool) transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容，IE9支持代替的-ms-transform属性不过只支持2D转换。谷歌和Safari支持代替的-webkit-transform属性。I...

「干货」CSS 不定宽高的垂直水平居中（最全 9 种）

Micherwa Blog

09-03

566

垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中。 9 种方法呈现 1、flex 大家的第一反应，可能就是 flex 了。因为它的写法...

css布局不定宽高的水平垂直居中

qian_an_hua_li的博客

05-16

357

1. css{ position:absolut; left:50%; top:50%; transform:translate(-50%,-50%); } 2.Flexbox弹性盒子模型 .parent{ justify-content:center; align-items:center;

Web前端面试题整合，持续更新【可以收藏】

jason的java世界

12-12

1722

前端面试笔记-CSS篇

qq_46354688的博客

03-04

953

目录选择器的权重和优先级盒模型标准盒模型和替代模型（IE）块级盒子与内联盒子隐藏一个元素Position文档流定位z-index浮动如何清除浮动包含块与控制框BFC外边距折叠（合并外边距与BFC、margin叠加）margin塌陷BFC 可以包含浮动的元素（清除浮动）BFC 解决文字环绕的问题层叠上下文层叠水平层叠上下文的特性DisplayFlex布局Grid布局各种居中块级元素水平居中（左右居中）块级元素垂直居中负外边距绝对居中容器内居中**视区内居中**变形（Transform）flex块中不定行的文字

html

tianguanghui1018的博客

05-05

1105

1. Html和CSS的关系 h1{ font-size:12px; color:#930; text-align:center; } Hello World! 2.

运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法？

鹏仔工作室的秘密基地

02-01

490

转自鹏仔先生个人博客百度搜索：鹏仔先生网址 www.sharedblog.cn/?post=41 运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法？一、在屏幕窗口水平垂直都居中，方法如下：元素{ position: fixed; left: 50%; top: 50%; transfrom: translate(...

CSS 不定宽高的盒子水平垂直居中

lhrdlp的学习笔记

09-20

434

在平时练习的时候经常会碰到盒子需要定位的问题,一般都是使用 margin:auto 就可以实现盒子的定位了. 有同学说在面试的时候碰人家问了这道题,说实话,突然还有点懵,我想没有宽高的盒子看都看不见,何谈定位,其实是我偏面了,里面可以写一些内容把盒子撑开.具体看下面: 1.使用定位来实现 .box1 { position: relative; width: 200px; height: 200px;

css 不定宽高元素水平垂直居中

八佾舞于庭

10-19

841

方法三种，可以根据实际需求选择。方法一 <body> <div id="box"> <div id="content">山夫不解数甲子，一叶落知天下秋。</div> </div> </body> html,body{ width:100

使用css实现不定宽高元素的垂直水平居中

qq_57205669的博客

04-04

1150

给定三个li标签，使li元素的内部使用不同的方式实现垂直水平居中 <ul> <li class="li1"> <p>123</p> </li> <li class="li2"> <p>123</p> </li> <li class="li3"><span

CSS3 不定宽高水平垂直居中

abc20140818的博客

03-28

display: flex; justify-content: center; // 子元素水平居中 align-items: center; // 子元素垂直居中 【在父元素上添加上面3句，即可实现子元素水平垂直居中】转载于:https://www.cnblogs.com/queende7/p/8666544.html...

CSS不定宽高垂直水平居中的方法

Tonghanhan的博客

06-05

458

父元素位于相对定位，子元素绝对定位，再结合transform的水平和垂直移动来实现不定宽高的子元素垂直居中。

CSS 不定宽高的垂直水平居中（9种方法）

qq_43067585的博客

08-14

3179

如何实现宽高不定的元素水平垂直居中的效果

最新发布

03-08

<think>好的，我现在需要解决用户的问题：如何实现宽高不定的元素水平垂直居中。首先，我得回忆一下常见的居中方法，特别是针对不确定尺寸的情况。用户可能在前端开发中遇到了布局问题，尤其是在响应式设计中，元素的大小可能不固定，这时候传统的居中方法可能不适用。首先，我应该考虑Flexbox布局，因为它非常适合处理这种问题。Flexbox的align-items和justify-content属性可以轻松实现水平和垂直居中，而且不需要知道元素的尺寸。记得要给父容器设置display: flex，然后使用这两个属性。不过，可能需要考虑浏览器的兼容性，但现在大多数现代浏览器都支持Flexbox了。接下来是CSS Grid布局，这也是一个强大的工具。通过设置父容器为grid，然后使用place-items: center，可以快速居中。同样，Grid的兼容性也不错，但可能比Flexbox稍差一些，不过对于大多数项目来说应该没问题。然后，绝对定位结合transform的方法也是一个经典方案。将子元素设置为绝对定位，top和left各50%，然后通过translate(-50%, -50%)来调整位置。这种方法不依赖元素的宽高，因为translate使用的是元素自身的百分比，所以无论元素大小如何都能居中。不过需要注意父容器需要有一个非static的定位，比如relative。还有一种方法是使用table-cell布局，虽然这种方法比较老旧，但在某些情况下可能仍然有用。将父容器的display设置为table-cell，然后利用vertical-align: middle和text-align: center来实现居中。不过这种方法可能需要额外的元素或结构，可能不如Flexbox或Grid灵活。另外，可能需要提到inline-block结合伪元素的方法，但这种方法可能不够直接，或者适用场景有限，特别是对于不定宽高的元素可能不太方便。还需要考虑不同方法的兼容性需求。如果用户需要支持旧版浏览器，比如IE，那么Flexbox和Grid可能需要前缀或者替代方案。但如果是现代浏览器，优先推荐Flexbox或Grid，因为它们更简洁、维护性更好。可能还需要提醒用户，某些方法可能会影响其他布局，比如使用绝对定位会脱离文档流，可能需要调整父容器的高度或避免其他元素重叠。而Flexbox和Grid则更适用于容器内的整体布局调整。总结下来，应该分步骤介绍几种主要方法，每种方法的代码示例，以及它们的优缺点和适用场景。确保用户能够根据具体情况选择最合适的解决方案。同时，代码示例要准确，使用正确的CSS属性和语法，比如注意Flexbox和Grid的不同属性设置，绝对定位的正确使用方式等。</think>实现宽高不定的元素水平垂直居中有以下五种常见方案：一、Flex弹性盒子方案 ```css .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ width: 300px; height: 200px; border: 1px solid #ccc; } ``` 二、Grid网格布局方案 ```css .parent { display: grid; place-items: center; /* 同时设置水平和垂直居中 */ width: 300px; height: 200px; border: 1px solid #ccc; } ``` 三、绝对定位+Transform方案 ```css .parent { position: relative; width: 300px; height: 200px; border: 1px solid #ccc; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 四、Table-Cell方案（兼容旧浏览器） ```css .parent { display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ width: 300px; height: 200px; border: 1px solid #ccc; } .child { display: inline-block; /* 需要设置为行内块元素 */ } ``` 五、Margin+伪元素方案 ```css .parent { text-align: center; width: 300px; height: 200px; border: 1px solid #ccc; } .parent::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .child { display: inline-block; vertical-align: middle; } ``` 方案选择建议： 1. 现代项目优先推荐使用`Flex`方案，代码最简洁 2. 需要兼容IE9-等旧浏览器时选择`绝对定位+Transform`方案 3. 需要二维布局时选择`Grid`方案 4. 特殊场景可使用`Table-Cell`或`伪元素`方案所有方案都无需提前知道子元素尺寸，能自适应内容大小，建议根据项目浏览器兼容要求选择合适的实现方式。