实现元素的水平和垂直居中方法总结

最新推荐文章于 2023-08-12 22:49:16 发布

卡卡的笔录

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量216

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/m0_38102188/article/details/105116508

版权

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用Flex布局实现元素水平和垂直居中的方法，适用于非绝对定位元素。通过设置父元素display为flex，justify-content和align-items为center，可以轻松实现子元素的居中显示。然而，此方法在IE浏览器上的兼容性较差。

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

非绝对定位元素

方法一

利用flex布局，IE浏览器兼容性不好。

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

//css
.father {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
    height: 100px;
	background-color: blue;
}
.son {
	background-color: red;
}

得到的结果如下图所示：
在这里插入图片描述

绝对定位元素

参见我的另一篇博文：如何实现绝对定位元素的水平和垂直居中

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卡卡的笔录

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS实现元素水平垂直居中的各种方法

Kotlin0139的博客

07-16

1万+

在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...

实现元素水平垂直居中的 N 种方式

sisterAn的博客

08-16

1628

水平居中 1. 行内元素若是行内元素，给其父元素设置 text-align:center 即可实现行内元素水平居中 <div class="parent"> <span class="child">测试</span> </div> <style> .parent { background-color: aqua; text-align: center; /* 水平居中 */ }.

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

实现元素的垂直与水平居中的六种方法

反重力落叶的博客

05-10

1106

一、 img的垂直水平居中使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

实现元素水平与垂直居中的几种方式

weixin_44591840的博客

07-08

364

如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题 1）单行文本的居中主要实现css代码：水平居中：text-align:center;垂直居中：line-height:XXpx; /line-height与元素的height的值一致/ 我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简...

元素水平垂直居中三种方法实现

是一座岛

06-21

340

一. 简介实现一个元素水平垂直居中的效果。二. 实现<body> <div class="center"></div> </body>方法一：(此方法适合宽高固定的) .center { width: 200px; height: 200px; position: absolute; left: 50%; t...

让元素水平垂直居中的四种方法

热门推荐

杏子

06-12

2万+

让元素水平垂直居中的3种方法前言一、使用弹性布局二、使用 transform三、使用绝对定位四、总结前言让元素水平居中有很多方法，比如设置 text-align:center；比如设置margin:auto再比如使用弹性布局，display:flex，justify-content:center。但是让元素垂直居中，或者是水平垂直居中却不是那么容易，今天就给大家分享一下3种让元素水平垂直居中的...

实现元素垂直水平居中的四种办法

zq15517069607的博客

11-02

204

(1)利用line-height＋ text-align <div id="box"> <div>垂直水平居中</div> </div> #box { height: 120px; line-height: 120px; //垂直居中 text-align: center; //水平居中 } (2)利用flex/grid＋ margin <div id="parent"> <div class="ch

块级元素的三种垂直水平居中的方法

12-29

直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意）定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值）定位+transform（不固定子级的宽高） flex...

元素水平垂直居中的几种方法

01-20

在网页布局设计中，元素的水平垂直居中是一项常见的需求，尤其在响应式设计和动态内容展示中显得尤为重要。本文将介绍四种不同的方法来实现这一目标，每种方法都有其适用场景和优缺点。首先，我们来看第一种方法，...

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

01-19

下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...

元素及文本的水平居中/垂直居中/绝对居中总结

09-25

总结来说，水平居中、垂直居中和绝对居中是Web布局中的常见需求，可通过不同的CSS属性和规则来实现。选择合适的居中方法需要了解各种属性的作用范围、限制以及浏览器的兼容性差异。通过实践和测试不同的方法，可以...

【CSS】一文掌握元素水平垂直居中

最新发布

weixin_50863323的博客

08-12

1756

实现元素水平垂直居中有以下七种方法：利用定位+margin:auto——子绝父相，设置top、left、right、bottom为0,在设置margin:auto 利用定位+margin:负值——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设margin-left和margin-top为自身元素宽高的负一半，实现水平垂直居中。利用定位+transform——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设transform: translateX(

三种设置元素水平垂直居中的方法

qq_43406976的博客

10-07

241

text-align: center; margin: 0 auto; line-height: 100px; // 行高等于盒子的高度 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; ...

设置元素水平和垂直同时居中的几种方法

bzf0482的博客

05-04

744

先来说说块级元素第一种方法： 1、给元素一个定宽，再用margin：0 auto；让元素水平居中 2、设置元素position: relative;相对定位，top：50%，再设置 transform: translateY(-50%);让元素垂直居中。说说这种方法的原理：水平定宽居中大家已经熟知了吧，就是设置左右为自适应，就可以居中了，垂直上先设置相当到位距离顶部50%，但是这个是以元素上...

元素水平垂直居中的六种方法

whtis666的博客

06-01

7490

元素的水平垂直布局方法

html里元素水平居中和垂直居中的几种方式

在路上...Try Fly

04-06

9812

站在前辈们的肩膀上来学习和总结！ 1.文本的居中 height+line-height：配合使用，垂直方向居中 text-align：父级的text-align，水平居中 ps：text-align：center 只是将子元素里的内联元素居中。还有一种文本居中的方式是定高父级元素激活表格属性和基线样式： display：table-cell;vertical-align：middle;

实现元素水平垂直居中的4种方法

青衫客~的博客

09-30

4251

引元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图： <body> <div class="father"> <div class="son"></div> </div> </body> 一、使用弹性盒模型flex实现设置父元素的布局方式为flex， display: flex; 设置父元素在水平方向上的对齐方式为居中对齐，j

实现水平垂直居中的4种解决方案

bury_的博客

03-03

6563

观看完整代码和示例效果：https://lucyzlu.github.io/Web/align-center.html 1.基于表格样式将要使内容居中的外层容器元素的display设置成table，内层内容块使用table-cell，然后分别设置水平和垂直居中： /*表格方案*/ #table-father{ ...

实现元素水平垂直居中的方法

05-11

实现元素水平垂直居中的方法有多种，下面列举几种比较常用的方法： 1. 使用flex布局使用flex布局可以很方便地实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用绝对定位使用绝对定位可以将元素相对于父元素进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用表格布局使用表格布局可以将元素放置在表格单元格中，并通过设置单元格的垂直和水平对齐方式来实现元素的水平垂直居中。具体实现方法如下： ```css .container { display: table; width: 100%; height: 100%; } .box { display: table-cell; text-align: center; /* 水平居中 */ vertical-align: middle; /* 垂直居中 */ } ``` 4. 使用transform属性使用transform属性的translate函数可以将元素相对于自身进行定位，从而实现水平垂直居中。具体实现方法如下： ```css .container { position: relative; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上是一些比较常用的方法，还有其他一些方法可以实现元素的水平垂直居中，可以根据具体情况进行选择。