前端页面中元素的水平垂直居中对齐

最新推荐文章于 2025-05-30 15:17:23 发布
最新推荐文章于 2025-05-30 15:17:23 发布
阅读量1.2k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 初级进阶 文章标签： 前端 css text-align 水平垂直居中 居中对齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35017691/article/details/88569394
本文介绍了多种CSS方法实现前端页面中元素的水平垂直居中对齐，包括未知父元素宽度、高度的情况，以及使用transform: translate()的技巧。详细讲解了display: flex、绝对定位以及CSS3的transform属性的应用。

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

元素水平垂直居中对齐

1 文本的水平垂直居中对齐

这是最简单的，直接在元素属性中使用text-align：center ；让文本水平居中，再通过行高：
line-height:元素的高度 ；让文本垂直居中对齐

HTML布局
HTML布局
CSS样式
在这里插入图片描述
效果展示：
文本的水平垂直居中对齐

	注意点：text-align是对块元素的特质，内部必须是行内元素等，如果里面div也想水平居中，可以设置display：inline-block；不过此时无法通过line-height来设置div垂直居中

2 未知父元素宽的情况下水平垂直居中对齐

不定宽的父元素居中对齐，使用display：flex属性和margin：auto可以解决
css
效果截图

3未知父元素宽高的情况下另一种方法（已知子元素自身宽高）

使用子绝父相布局，父元素 position:relative ; 子元素 position:absolutate;top:50%;left:50%;margin-left:-50%(子元素自身宽度)；margin-top:-50(子元素自身高度)下面是css代码
css
截图效果如下
在这里插入图片描述

4未知宽高情况下

父元素使用flex布局，属性justify-content:center 水平居中，align-items:center;垂直居中
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190315135228713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDE3Njkx,size_16,color_FFFFFF,t_70)

在这里插入图片描述

5还有css3中的transform：translate（x,y）;

把3中的margin-left和margin-top去掉，加transform即可；
Web前端开发-垂直居中
viewerlin的博客
04-24 3567
Web前端开发，自学笔记整理 垂直居中 1.垂直居中问题-1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=&q
前端的学习之路：初级CSS---文本的水平和垂直对齐
weixin_44647555的博客
02-08 259
文本的水平和垂直对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本的水平和垂直对齐</title> <!-- <link rel="style
前端页面垂直居中效果
dd2016124的博客
07-16 217
最简单的是把height和line-height属性设置成同样的值即可。 例如： <div style="height:100px;line-height:100px;"> </div>
前端CSS垂直居中的几种种方法
最新发布
m0_67078501的博客
05-30 293
摘要：本文介绍了7种CSS实现垂直居中的方法：1)使用vertical-align:middle（需配合inline-block）；2)采用flex布局（父元素display:flex，子元素align-self:center）；3)通过伪元素:before；4)利用table-cell属性；5)创建隐藏节点计算剩余高度；6)已知父元素高度时使用transform；7)用line-height匹配父元素高度（适用于单行文本）。这些方法各具特点，可根据不同场景选择使用。（147字）
页面居中对齐
Alisa_vc的博客
11-19 1121
1、top:50%;left:50%;       transform:translate(-50%,-50%);   2、top:50%;left:50%;      margin-left:-宽度的一半;      margin-top:-高度的一半;
页面水平居中布局
牧师的博客
01-05 510
个人的学习笔记 一.水平居中布局（核心代码，四种方式） 1.display：flex + justify-content:center || margin：0 auto .parent宽是不固定的 类名为.child的div是display：block 默认与父元素同宽，父元素设置了display：flex后，子元素（.child）就变成了flex-item默认的宽是会根据内容的宽，父级元素再...
表单元素和文字垂直居中对齐问题解决整理
09-25
在网页设计中，表单元素和文字的垂直居中对齐是一个常见的需求，尤其是在创建整洁、用户友好的界面时。本文主要讨论了如何解决表单元素（如输入框、下拉框、单选框和复选框）以及与其关联的文字在垂直方向上保持一致...
DreamWeaver文字怎么居中对齐? dw垂直居中对齐的技巧
09-24
以上就是通过DreamWeaver实现文字水平和垂直居中对齐的技巧。对于初学者而言，通过可视化编辑工具可以帮助快速实现设计效果，但掌握CSS的基本属性是深入学习网页设计和前端开发的必要条件。通过实践和理解这些基本...
前端CSS：CSS设置水平垂直居中的方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-28 1295
掌握了这些方法和技术后，你就可以在各种场景下灵活地实现元素的水平垂直居中。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，CSS Grid 是一种更为现代的布局方法，它同样可以用来实现元素的水平垂直居中。当需要居中多个元素时，可以将它们放在一个共同的容器中，并对该容器应用居中样式。Flexbox 是现代浏览器的一项强大特性，它可以轻松地实现元素的居中。
CSS制作水平垂直居中对齐 多种方式各有千秋
12-10
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要...
div元素的水平垂直居中
testleaf.cn
12-03 1413
可以选择以上任意一种方法来实现div元素的水平垂直居中。Flexbox 和 CSS Grid 是现代布局的首选方法，因为它们更简洁和强大。
前端学习笔记65-文本的水平和垂直对齐
weixin_45034895的博客
05-05 510
前端学习笔记65-文本的水平和垂直对齐text-alignvertical-align图片基线 text-align 功能：文本的水平对齐 可选值：  left：左侧对齐  right：右侧对齐  center：居中对齐  两端对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
【前端】水平垂直居中的几种方式
doctor_oyy的博客
10-03 3212
1. flex 布局 flex布局也叫弹性布局，我认为flex box布局是一种十分优雅的布局方式，兼容性一般，使用起来非常简单。 display: flex;// flex-direction默认是row justify-content: center; //水平居中 align-items: center; //垂直居中 2. 绝对定位 + margin 负边距 给元素设置定位absolu...
前端——水平垂直居中
u010565037的博客
02-17 491
水平垂直居中的实现方法，网上一搜少说有七八种，这里只总结三种，作为自己后续面试以及实践的知识储备。 方法一：绝对定位+margin：auto实现 #father{ width: 200px; height: 200px; background: #ccc; position: relative; } #son{ width: 100px;
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
weixin_42147268的博客
04-02 3150
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
前端学习-元素对齐
qq_50106904的博客
08-04 583
元素常用对齐方式
web前端教程之页面元素水平居中
04-13 3096
小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候，往往面临着方法的选择，而各种方法有的简单，有的困难，还有的有一些坑，在选择方法时我们应该怎么做才能不走弯路呢？ 话不多说，现在就来分享我的一些方法，在分享之前我先查查秘籍 咳咳，下面是正式内容，以我们最常见的网页为例 上图网页中，红框部分内的左右元素都是水平居中显示的，其中既有大小不一的文本又有图片，面对这种情况只要我们解决其中一个，另外三个就很简单了，那么这一个我们应该怎么处理呢 水平居...
常用的前端垂直居中的的方法
weixin_52657749的博客
05-17 3583
1.第一种就是使用line-height，将line-height设置成和height一致，则可垂直居中: 原因：line-height是单行高度，一行内的文字垂直居中，将line-height设置成和div的height一致，则单行文字自然也就放在了div的中间了。 2.第二种方法就是弹性布局即：display:flex .two-flex为父元素，将父元素设置为flex，弹性布局中有一个容器（即采用flex布局的元素）的属性align-items（单根轴线的交叉轴的对齐...
前端对齐方式：水平+垂直
m0_56047670的博客
01-02 1424
水平垂直居中对齐方式
CSS实现图片在容器中水平垂直居中的技巧
在网页设计中，使图片能够水平垂直居中是一项常见的需求，特别是对于产品展示页面，保持图片的居中对齐可以提升用户体验。然而，当图片尺寸不固定或容器大小不一时，使用传统的方法，如设置margin，往往难以实现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值