CSS中元素水平垂直居中4种方法介绍

最新推荐文章于 2025-06-16 16:15:00 发布
最新推荐文章于 2025-06-16 16:15:00 发布
阅读量556 收藏
点赞数
本文介绍四种实用的CSS技巧，包括table-cell、相对定位、line-height和绝对定位，帮助开发者轻松实现文本或元素的水平垂直居中。

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

第一种方法：table-cell轻松设置文本图片水平垂直居中

　　让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align(这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。

　　IE7及以下版本不支持此方法，IE8及以上版本及大部分的主流浏览器都很好的支持。

　　HTML代码

 代码如下  

<div class="img">
    <img src="../images/a-1.jpg" alt="" />
</div>

样式规则
.img{
    display:table-cell;
    vertical-align:middle;
    width:400px; height:500px;
    text-align:center;
    border:#CCC 1px solid;
}
/*IE7不支持该方法*/


第二种方法：使用相对定位使元素水平和垂直居中

　　利用相对定位使元素水平居中：要求元素有固定的宽度，设置元素的left:50%,这样元素的左边边界线和该元素的父级元素的水平方向的中线重合，设置margin-left,值为负的元素宽度的一半，让元素向左移动半个宽度的位置，就可以使元素水平方向的中线与父级元素的中线重合，即实现了元素的水平居中。

　　举例：让一个容器元素水平居中显示，宽度:960px;

　　width:960px; position:relative; left:50%; margin-left:-480px;

　　上面这段代码和下面的这段代码等价，使用margin:0 auto;让元素居中，被广泛的使用，大家都很熟悉

　　width:960px; margin:0 auto;

　　利用相对定位使元素垂直居中：要求元素有固定的高度，设置元素的top:50%,这样元素的上边边界线和该元素的父级元素的垂直方向的中线重合，设置margin-top,值为负的元素高度的一半，让元素向上移动半个高度的位置，就可以使元素的垂直方向的中线与父级元素的中线重合，即实现了元素的垂直居中。

　　以下是利用相对定位实现元素水平和垂直居中的示例，父级元素.box,该元素占据的空间宽度250px,高度150px;(计算进padding的值)

 代码如下  
.box{
    width:300px;
    height:200px;
    border:#CCC 1px solid;
}
.box span{
    display:block;
    width:240px;
    height:140px;
    background-color:#CCC;
    position:relative;
    top:50%;
    left:50%;
    margin:-75px 0 0 -125px;
    padding:5px;
}

　　示例要实现的效果：让span这个元素在.box中水平垂直居中，首先将span变成一个块级元素，使之水平居中可以使用margin:0 auto;这是我们常用的，在这里，我们使用相对定位来实现。


第三种方法：使用line-height让单行文字垂直居中

　　这种方式是我们大家经常用到的，让标题，按钮等的文字垂直居中，IE6/7/8/9/10，FF,Chrome,Safari都支持

 代码如下  

box_1{ 
    width:300px;
    height:55px;
    line-height:55px;
    text-align:center;
    border:#ccc 1px solid;
}


第四种方法：使用绝对定位让元素水平垂直居中

 代码如下  

.box_2{
    width:300px;
    height:200px;
    border:#CCC 1px solid;
    position:relative;
    top:0;
    left:0;
}
.box_2 span{
    display: block;
    width:240px;
    height:140px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background-color:#ccc;
    padding:5px;
}
/*IE7不支持,移动端的网页开发可以使用这种方式*/

Let_It_Go_One
关注
水平垂直居中一个元素（五种方法）
艾欢欢的博客
03-15 811
如何水平垂直居中一个元素 第一种：使用定位（已知本身元素宽高） /*子元素*/ .div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); } 第二种：使用...
css实现元素水平垂直居中常见的两种方式实例详解
09-24
在CSS布局设计中，使元素水平垂直居中是一项常见的需求。本文将详细解析两种主流的实现方法，并通过实例代码进行演示。 首先，我们来看第一种方法：使用`flexbox`(弹性盒模型)布局。Flexbox是CSS3引入的一种布局...
css中元素水平垂直居中4种方法介绍
weixin_30345055的博客
09-26 149
　table-cell轻松设置文本图片水平垂直居中 　　让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align(这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。 　　IE7及以下版本不支持此方法，IE8及以上版本及大部分的主流浏览器都很好的支持。 ...
前端基础知识CSS系列 - 06（元素水平垂直居中的方法？如果元素不定宽高）
最新发布
m0_67078501的博客
06-16 990
元素水平垂直居中方法总结 本文介绍了多种实现元素水平垂直居中的CSS方法，主要分为两种情况：已知子元素宽高和未知子元素宽高。 已知宽高的方法包括： 定位+margin负值（需计算偏移量） 定位+auto margin（子元素需设置宽高） 未知宽高的方法包括： 定位+transform平移 flex弹性布局（推荐） grid网格布局 table表格布局 此外还区分了内联元素和块级元素的不同居中方式。flex和grid布局最为简便，但需考虑兼容性问题。transform方法无需计算具体尺寸，是margin负值的
CSS实现水平垂直居中的四种方法
小橘子y的博客
09-11 188
translate
CSS | 水平垂直居中都有哪几种方式
Demo的博客
04-02 1182
我把一个子元素在父元素中水平垂直居中的实现方式分为三类，第一类是宽度已知，第二类是宽度未知，第三类是图片水平垂直居中。 第一类 宽度已知 第一种方式：采用绝对定位 原理 元素开启绝对定位后，水平方向和垂直方向分别要满足下列等式 水平方向：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区的宽度 垂直方向：top+margin-top+border-top.
css让一个元素垂直水平居中的四种方法
MISS_zhang_0110的博客
10-15 442
让一个元素垂直水平居中的四种方法第一种（绝对定位+margin）第二种（绝对定位+位移）第三种（绝对定位+margin）第四种（行内块） 第一种（绝对定位+margin） div.box{ weight:200px; height:400px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 第二种（绝对定位+位移） div.box{ weig
CSS水平垂直居中的几种方法总结
09-24
使用负margin法可以实现脱离文档流的元素水平垂直居中。首先将元素的position属性设置为absolute，并利用top和left属性将元素移至容器的中心，然后通过设置margin-top和margin-left为负值（分别是自身高度和宽度的...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
元素水平垂直居中的几种方法
01-20
在网页布局设计中，元素的水平垂直居中是一项常见的需求，尤其在响应式设计和动态内容展示中显得尤为重要。本文将介绍四种不同的方法来实现这一目标，每种方法都有其适用场景和优缺点。 首先，我们来看第一种方法，...
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
元素水平垂直居中的四种方式
Tangoneone的博客
01-16 449
<style> .father{ width: 300px; height: 300px; margin: 100px auto; border: 1px solid red; position: relative; } .son{ width: 100px; ...
CSS如何实现水平垂直居中？4种工作中非常常用的方法
热门推荐
zhongheng310的博客
02-26 1万+
*CSS如何实现水平垂直居中？ ** 1.用定位中的 “子绝父相” 来做 [核心代码是给子盒子添加的margin-top、margin-left 分别等于自身的高度、宽度的负的 一半] PS：缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，这个时候就需要JS获取了。 2. 用定位中的 margin: auto 来做 当然也是要在绝对定位下 3.绝对定位————位偏移 4.CSS3.0弹性布局 弹性布局① 给body(父盒子)加弹性元素display: flex; align-items: c...
css水平垂直居中的4种方法
qq_44875834的博客
12-08 183
css垂直居中 第一种 .center{ width:200px; height:200px; background: #000; position:fixed/absolute; top:50%;//向有移动父盒子宽度的一半 left:50%; margin-left:-w/2;//w(200px) //向左移动自身宽度的一半 margi...
元素的水平垂直居中的4种方法
qq_38384536的博客
06-28 298
第一种方法 html: css部分： #wrap{position:relative;} .box{position:absolute;top:0;left:0;right:0;bottom:0;margin auto;} 第二种 #wrap{position:relative;} .box{position:absolute;top:50%;left:50%
元素水平垂直居中的几种方式
lemon_hongcha的博客
03-10 822
元素水平垂直居中的四种方法 1.flex弹性盒 使用flex弹性盒的居中方式，我们只需要给与其父元素设置 { display: flex; justify-content: center; align-items: center; } 这三个属性就可以让其内部元素水平垂直居中（父元素内只有一个子元素） 2.position定位 要求父元素是定位属性元素也就是position不为stat...
android studio table居中代码_css 垂直居中的几种实现方式
weixin_39732491的博客
11-29 287
前言设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。实现方式备注：如下页面效果中的灰色方框高度都做了限定为 100 px(即父元素)1、line-height 方式line-height 设置行高，多用于控制多行文本之间的间隔大小。但利用它的特性也可以控制垂直居中。...
关于css垂直水平居中的几种方式
demosoftwa的博客
03-11 404
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的，在这里向大家介绍一下几种方式。 1.水平居中 margin: 0 auto; 效果图： 而文字的垂直水平居中也比较简单，加上line-height: 200px;与text-align: center;即可。 #test{ width: 200px; height: 200px; line-height: 200px; background: red; margin: 0 auto; text-align: center
css水平垂直居中四种常用方式
CSDdas的博客
05-10 4024
css水平垂直居中四种常用方式
css实现元素水平垂直居中有几种方法
05-17
### CSS 实现元素水平垂直居中的方法汇总 以下是几种常见的实现元素水平垂直居中的方法： #### 方法一：使用 `display: table-cell` 和 `vertical-align: middle` 通过将父容器的 `display` 属性设置为 `table-cell`，并配合 `vertical-align: middle`，可以轻松实现子元素的垂直居中。同时，为了达到水平居中，可以在父容器上设置 `text-align: center`[^1]。 ```html <div style="border: 1px solid black; width: 300px; height: 300px; display: table-cell; text-align: center; vertical-align: middle;"> <div style="background-color: red; display: inline-block;">水平垂直居中</div> </div> ``` --- #### 方法二：使用绝对定位和 `transform` 这种方法利用了 `position: absolute` 的特性以及 `translate()` 函数来调整位置。通过设置 `top: 50%; left: 50%` 将元素中心点移动到父容器的中心，再用 `transform: translate(-50%, -50%)` 抵消自身的宽度和高度偏移[^4]。 ```css .parent { position: relative; width: 300px; height: 300px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` --- #### 方法三：使用 Flexbox 布局 Flexbox 是现代布局中最常用的方法之一。只需将父容器的 `display` 设置为 `flex`，并通过 `align-items: center` 和 `justify-content: center` 来分别控制垂直和水平方向上的居中[^2]。 ```css .parent { display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; } ``` --- #### 方法四：使用 Grid 布局 Grid 布局提供了更强大的二维布局能力。可以通过设置 `place-items: center` 或者单独指定 `align-items` 和 `justify-items` 来完成居中操作[^2]。 ```css .parent { display: grid; place-items: center; width: 300px; height: 300px; } ``` --- #### 方法五：行内块元素与基线对齐 对于某些特定类型的行内块元素（如 `<input>`、`<img>` 等），可以直接通过设置其 `vertical-align` 属性为 `middle` 来实现与其他文本内容的水平对齐[^3]。 ```html <span>这是一个例子：</span><input type="text" style="vertical-align: middle;" /> ``` --- 以上列举了几种主流的 CSS 水平垂直居中方法，每种方法都有各自的适用场景和技术特点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值