[CSS]垂直水平居中

最新推荐文章于 2025-07-02 15:54:47 发布

原创最新推荐文章于 2025-07-02 15:54:47 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

前端面试题同时被 2 个专栏收录

67 篇文章

订阅专栏

css

28 篇文章

订阅专栏

本文介绍了使用CSS实现元素在页面上垂直和水平居中的两种方法。第一种方法通过设置绝对定位，结合50%的left和top属性，再利用负margin调整。第二种方法同样采用绝对定位，但通过同时设置top、bottom、left和right为0，再用margin:auto实现居中效果。

垂直水平居中两种实现方式：

.box{
		width:200px;
		height: 200px;
		background: red;
		position: absolute;
		left:50%;
		top:50%;
		margin-left:-100px;
		margin-top:-100px;
	}

.box{
		width:200px;
		height: 200px;
		background: blue;
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DaftJayee

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

[JavaScript][异步]Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？

DaftJayee的博客

08-23

2431

const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) promise.then(() => { console.log(3) }) console.log(4) 执行结果是：1243 promise构造函数是同步执行的，then方法是异步执行的 ...

前端面试题HTML+CSS基础篇——垂直水平居中

xiaomao_wxj的博客

08-03

292

盒子垂直水平居中 1. margin:auto 父元素宽高固定，子绝父相，父元素相对定位，子元素绝对定位 .father{ height: 200px; width: 200px; position: relative; } .son{ position: absolute; width: 80px; height: 80px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } 2. 子绝父相，已知宽高的情况下 .fat

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

CSS 垂直分布

Full_Career的博客

07-19

3034

http://www.cnblogs.com/dojo-lzz/p/4419596.html 这里面我用的是子元素的display:inline-block;vertical-alinge:middle;line-height:xxpx;来解决的问题

css垂直水平居中的几种方法CSS

sinat_28005185的博客

02-10

976

‌注意‌：对于块级元素，text-align: center在table-cell中不会直接生效，因此需要将子元素设置为inline-block或inline。‌table-cell‌：实现简单，兼容性好，但可能需要将子元素设置为inline-block或inline以应用水平居中。使用place-items: center（或justify-items和align-items）实现水平和垂直居中。‌line-height + text-align‌：适用于单行文本，实现简单但功能有限。

CSS垂直水平居中的各种解决方法汇总

路漫漫其修远兮，吾将上下而求索。

02-22

2257

目录 CSS水平居中文本水平居中单个块级元素水平居中多个水平排列的块级元素水平居中多个垂直排列的块级元素水平居中 CSS垂直居中单行文本垂直居中多行文本垂直居中方法1：使用table布局方法2：设置vertical-align，line-height 方法3：使用flex布局方法4：设置伪元素块级元素垂直居中方法1：flex布局方法2：设置absol...

css元素水平垂直居中

博哥的二进制世界

06-03

1925

/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素）添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

css垂直水平居中的详细实现方式（6种）

weixin_46591819的博客

02-22

8996

css垂直水平居中方式

最全CSS垂直水平居中的方法（十二种）

热爱前端的大三在校生

07-27

3784

最全CSS垂直水平居中的方法，告别知识短板，拒绝一知半解

css垂直水平居中的6种实现方式

m0_60666452的博客

04-11

841

left: 50%;top: 50%;/* 高度的一半 *//* 宽度的一半 */设置父元素的position为相对定位，子元素绝对定位，并在 top 和 left 方向上移动父元素50%的距离。但这个时候，是子元素的上边框和左边框距离父元素150px，整体向右下角偏了一些，所以还需要再用 margin 调整至中心位置，数值分别是高度和宽度的一半。3、定位 + margin.box {left: 0;top: 0;right: 0;bottom: 0;

CSS 垂直水平居中布局全攻略：从基础到进阶的 10 种实现方式

最新发布

苦逼前端分享苦逼经验

07-02

1708

CSS垂直水平居中布局方案大全本文系统梳理了10种常见的CSS垂直水平居中实现方法，涵盖从传统定位到现代布局技术。主要内容包括：经典定位方法：绝对定位+margin:auto（兼容IE8+）、绝对定位+Transform（现代浏览器）现代布局方案：Flexbox单行/多行居中（推荐首选）、Grid二维居中（语法极简）特殊场景方案：表格布局（兼容旧版）、line-height（单行文本）、CSS变量动态适配实战案例：登录框居中布局的最佳实践选择指南：根据兼容性需求推荐Flexbox/Grid作为首

CSS——垂直水平居中

CYX_COMnn的博客

12-03

1243

垂直水平居中的方法有很多,小编这里知识讲解了小编在编写页面中常用的几种方法,方法虽然由于很多,但是我们在编写页面时,要根据页面的实际情况来选取最合适的方法来实现垂直水平居中。关于本篇文章,如果有错误或者是建议,请在评论区留言小编,小编这里会及时更修改,有其他更好的垂直水平居中方法也请留言小编,小编也会继续学习努力。

CSS 垂直水平居中的5种最佳解决方案

12-14

本文将详细介绍5种最常用的、被认为是最完善的CSS垂直水平居中解决方案。 1. **Flexbox居中** Flexbox布局模型是CSS3引入的新特性，它允许我们轻松地实现元素的对齐。在以下示例中，`.wrap`容器设置了`display: ...

CSS垂直水平居中的各种解决方法汇总 (ฅ´ω`ฅ)已阅留爪

01-08

目录 CSS水平居中文本水平居中单个块级元素水平居中多个水平排列的块级元素水平居中多个垂直排列的块级元素水平居中 ...CSS垂直水平居中方法1：设置absolute和margin 方法2：设置absolute和transf

精选资源

css垂直水平居中6种方式

09-08

这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue...

[JavaScript]es6中的let和const有什么区别

DaftJayee的博客

08-18

2665

一、const声明必须要赋值 let a; const b=1; const c; //报错：Missing initializer in const declaration（常量声明中缺少初始值设定项）二、const是常量，值不能变化 const a=1; a=2; //报错：Assignment to constant variable.（对常量变量赋值）当常量是个变量的时候，不能改变对象，但是是可以给他的属性进行赋值的 cons

[JavaScript]Window的name属性

DaftJayee的博客

08-13

2385

一、下代码都输出什么？ console.log(name) console.log(window.name) console.log(typeof window.name) var name = 5 console.log(name) console.log(typeof name) 答案在下方 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 二、答案 console.log(name) // '' console.log(window.name) // '' cons

[JavaScript]获取指定元素下所有的元素节点

DaftJayee的博客

08-18

2168

指定元素.getElementsByTagName("*")

[JavaScript]下面代码的输出结果

DaftJayee的博客

08-15

2052

function fun(n,o){ console.log(o); return{ fun:function(m){ return fun(m,n); } }; } var a= fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun...

[JavaScript]对象的Key可以为对象吗？

DaftJayee的博客

08-17

1741

对象的Key可以为对象吗？ var obj1={ name:"Jayee" } var obj2={ obj1:"123" } console.log(obj2)//{obj1: "123"} console.log(obj2.obj1)//123 //由此可以得出obj2中的obj1是个字符串，而不是我们最开始创建的对象obj1 答案是不可以，该

css 垂直水平居中

08-30

### 回答1：使用 CSS 让元素垂直水平居中有多种方法。使用 `position: absolute` 和 `transform: translate(-50%, -50%)...以上就是实现CSS垂直水平居中的几种常用方法，根据具体情况选择合适的方法来实现居中效果。