css元素居中的几种方式

最新推荐文章于 2022-09-22 13:40:16 发布
最新推荐文章于 2022-09-22 13:40:16 发布
阅读量373 收藏 2
点赞数
分类专栏： 前端基础 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36349582/article/details/105594754
版权

CSS实现水平居中和垂直居中

在前端开发中，元素的居中是经常会遇到的问题，网上也有许多的例子实现，这里总结一下，归纳出我常用的几种方法。

水平居中的几种方式

1、text-align 方式

text-align是前端常用的属性，text-align 属性规定元素中的文本的水平对齐方式,它居中的是文本或者图片对象，其实对块状元素并没有影响。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;text-align: center;">
        <div style="height: 50px;width:300px;background: #e0c99d;">居中</div>
    </div>
    <br>
    <div style="width:500px;height:100px;background: #d5e2e8;text-align: center;">
        <span>居中</span>
        <span>居中</span>
    </div>
</body>

页面效果：
在这里插入图片描述

2、margin auto 方式

当父元素宽度固定，通过设置子元素的margin属性也可以实现元素的居中。**注意：**该设置只对块状元素生效，对于块状元素，如果不设置宽度，块状元素将撑满整行。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;">
        <div style="height: 30px;width:300px;background: #e0c99d;margin: 0 auto;"></div>
        <br>
        <div style="height: 30px;background: #e0c99d;margin: 0 auto;"></div>
    </div>
    <br>
    <div style="width:500px;height:100px;background: #d5e2e8;">
        <span style="margin: 0 auto;display: block;width:100px;background: #e0c99d">居中</span>
        <span style="margin: 0 auto;background: #e0c99d">居中</span>
    </div>
</body>

页面效果：
在这里插入图片描述

3、position+transform 方式

采用position+transform 方式，对块状元素和非块状元素都能达到居中的效果

<div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
    <div
         style="height: 30px;width:300px;background: #e0c99d;position: absolute;left: 50%;transform: translate(-50%);">
    </div>
</div>
<br>
<div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
    <span style="background: #e0c99d;position: absolute;left: 50%;transform: translate(-50%);">居中</span>
</div>

页面效果：
在这里插入图片描述

4、flex方式

flex布局是我常用的一种布局方式，实现起来也很简单,只需要将justify-content属性设置为center即可。**注意：**当子元素没有明确高度时，子元素会根据父元素的高度进行拉伸。

<div style="width:500px;height:100px;background: #d5e2e8;display: flex;justify-content: center;">
     <div style="height: 30px;width:300px;background: #e0c99d;"></div>
</div>
<br>
<div style="width:500px;height:100px;background: #d5e2e8;display: inline-flex;justify-content: center;">
     <span style="background: #e0c99d;">居中</span>
</div>

页面效果：
在这里插入图片描述

垂直居中的几种方式

1、line-height方式

line-height适用于容器内只有一行行内元素的情况，只需要将父元素的line-height属性设置成与父元素的height高度相等即可实现。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;line-height: 100px;">
        <span>居中</span>
    </div>
</body>

2、vertical-align方式

将父元素的display属性设置为table-cell，设置父元素的vertical-align属性为middle，即可实现垂直居中。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;display: table-cell;vertical-align: middle;">
        <div style="height: 30px;width:50px;background: #e0c99d;"></div>
    </div>
    <br>
    <div style="width:500px;height:100px;background: #d5e2e8;display: table-cell;vertical-align: middle;">
        <span style="background: #e0c99d;">居中</span>
    </div>
</body>

页面效果：
在这里插入图片描述

3、position+margin

position+margin这种方式又分高度已知和高度未知，这里只介绍一种方法，对两种情况均适用。需要注意的是，当子元素为行内元素时，如果不设置子元素的高度，子元素将会拉伸到与父元素等高的高度。

<div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
        <div style="height: 30px;width:50px;background: #e0c99d;position: absolute;top: 0;bottom: 0;margin: auto;">
        </div>
</div>
<br>
<div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
    <span style="height: 30px;background: #e0c99d;position: absolute;top: 0;bottom: 0;margin: auto;">居中</span>
</div>

页面效果：
在这里插入图片描述

4、position+transform

这种方式与之前介绍的position+transform设置水平居中原理是相同的。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
        <div
            style="height: 30px;width:50px;background: #e0c99d;position: absolute;top: 50%;left:0;transform: translate(0,-50%);">
        </div>
    </div>
    <br>
    <div style="width:500px;height:100px;background: #d5e2e8;position: relative;">
        <span style="background: #e0c99d;position: absolute;top: 50%;left:0;transform: translate(0,-50%);">居中</span>
    </div>
</body>

页面效果：
在这里插入图片描述

5、flex方式

flex布局很简单也很使用，不了解的可以去学习一下。只需要将父元素的display设置为flex，再设置align-items为center即可**注意：**当子元素没有明确高度时，子元素会根据父元素的高度进行拉伸。

<body>
    <div style="width:500px;height:100px;background: #d5e2e8;display: flex;align-items: center;">
        <div style="height: 30px;width:50px;background: #e0c99d;"></div>
    </div>
    <br>
    <div style="width:500px;height:100px;background: #d5e2e8;display: flex;align-items: center;">
        <span style="height:30px;background: #e0c99d;align-items: center;">居中</span>
    </div>
</body>

页面效果：
在这里插入图片描述

TYicor
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS行内元素和块级元素的居中实例分析
12-13
一.水平居中　　 　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 　　对于块级元素有以下几种居中方式:　　 　　1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;　　 　　2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;　　 　　3.设置父元素float:left,position:relative,left:50%;子元素
css 垂直居中的几种实现方法
12-13
因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明： 复制代码代码如下: /* 代码实现： * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; } 二、使用 <table> <
CSS制作水平垂直居中对齐 多种方式各有千秋
12-10
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对于我这样的初学者有一定的帮助。 用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。 方法一： 这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度
CSS常见的让元素水平居中显示的方法
09-27
网页制作Webjx文章简介：用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 用CSS让元素居中显示并不是件很简
position定位属性 以及 元素居中方式
m0_51328823的博客
01-07 2546
定位属性position 在css中比较重要的便是position和float。 定位是将盒子定在某一个位置自由的漂浮在其他盒子的上面 定位的语法 定位=定位模式+边偏移(left right top bottom) 定位的属性值 1.静态定位 position: static; 相当于没有定位 设置边偏移无效 2.相对定位 position: relative; 1.相对于 自己原来在标准流中位置来移动的 2.不脱标(继续占有原来的位置，后面的盒子仍然以标准流的方式对待它) 3.绝对定
Css居中布局（除flex） 总结
qq_38253873的博客
03-18 787
Css居中布局 总结 水平方向居中 1.text-align:center （父元素）+display:inline-block(子元素) 优点： 浏览器兼容性比较好（语法都是css2） 缺点： Text-align属性具有继承性，导致子级元素文本也是居中布局的 （需要单独再设置子元素） 2.display:table/block + margin:0 auto（子元素） 优点： 只需要对子级元素...
css 实用技巧 —— 文字和图标垂直居中对齐（四种方法）
朝阳39的博客
03-25 2万+
方法一：使用 vertical-align <template> <div style="padding: 20px;"> 使用 vertical-align 实现文字和图标垂直居中对齐<i class="icon-arrow"></i> </div> </template> <style scoped> .icon-arrow { vertical-align.
不用计算设置水平垂直居中
MorningDuGe
06-22 377
前提是父元素和子元素已经设置了宽高flex#father{ width:100%; height:400px; display: flex; justify-content:center; align-items:center; background-col
CSS垂直居中的12种实现方式
weixin_34348111的博客
01-15 373
使用绝对定位和负外边距对块级元素进行垂直居中 HTML &lt;div id="box"&gt; &lt;div id="child"&gt;&lt;/div&gt; &lt;/div&gt; 复制代码 CSS #box { width: 300px; height: 300px; background: #ddd; position: relative; ...
position的4种定位以及居中的2种方法。
tjh1998的博客
02-26 2万+
参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。 2.正常流（常规流）不会受到top，right,left,bottom的影响。 例如： &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot
css实现元素居中的6种方法
热门推荐
富朝阳的博客
09-22 3万+
相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。给定两个元素，这两个元素是父子级关系并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。
归纳HTML中上下左右居中对齐5个方式6个方法（postion2个方式、display：flex、grid、table-cell3个方式和flex、grid、table-cell属性详解）
AIWWY的博客
09-19 2万+
目录 HTML文本 显示效果 方式1 方式2（2种） 方式3 display：flex属性详解 方式4 display：grid属性详解 方式5 display:table-cell、vertical-align:middle属性详解 HTML文本 <div class="parent"> <div class="child"></div> </div> 显示效果 方式1 设置position：absolut..
css 如何让一个div垂直水平居中（非弹性盒子）
mossbaoo的博客
02-25 415
该文章方法是在非弹性flex盒子的情况下使用。 使用场景多为页面弹窗，需要垂直水平居中。 · 在未知div的宽度情况下，建议使用方法一和方法二 方法一 div{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 方法二 div{position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;} · 在已知div的宽度情况下
使用定位position实现元素居中
里昂的博客
10-24 4305
在使用绝对定位时要想实现水平居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 垂直居中同上 ...
CSS居中方式总结
qq_54334713的博客
03-24 2万+
行内元素 1.和其他元素都在同一行 2.高，行高及外边距和内边距部分可以改变 3.宽度只与内容有关 4.行内元素只能容纳文本或者其他行内元素 5.a,img,input,lable,select,sapn,textarea,font 块级元素 1.总是在新行上开始，占据一整行 2.高度，行高以及外边距和内边距都课控制 3.宽度始终与浏览器的宽度一样，与内容无关 4.可以容纳行内元素和其他块级元素 5.div,p,table,form,h1,h2,h3,dl,ol,ul,li 居中方式分为三种： .
CSS定位position总结（超详细哦！）
weixin_52625590的博客
08-01 2万+
开始学习css页面布局时，先接触到的有 **标准流 或 浮动**，但是经过后续的学习发现有些场景很难通过标准流 或 浮动来快速实现。 例如： **场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 **场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 这个时候我们就需要学习新的布局方法了——`定位（position）`...............
8种css居中实现的详细实现方式了
buruyang的博客
07-12 2万+
八种实现方式，拿去用吧
用 position 实现上下左右居中
bubbleSweet的博客
05-11 2149
用 position 实现上下左右居中 <div class="father"> <div class = "child1"></div> </div> .father { border: 10px solid black; overflow: hidden; height: 500px; }
css垂直居中的几种方法
最新发布
06-28
下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值