CSS布局居中显示的几种情况

最新推荐文章于 2024-06-22 15:02:04 发布
原创 最新推荐文章于 2024-06-22 15:02:04 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css3

本文详细介绍了前端开发中元素居中显示的各种解决方案，包括行内元素的text-align属性，块级元素的margin:0 auto，单行文本的line-height，绝对定位以及使用flex布局实现的水平垂直居中。每个方法都有相应的代码示例，适用于不同的场景需求。

前端开发中经常会遇到各种各样元素居中的设计，今天特意搜集归纳了一下各种情况下元素居中显示的解决方案。

行内元素水平居中：text-align

我最熟悉的一个属性，只能实现行内元素(display为inline或inline-block等)的水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            /* 只能确保子元素中的行内元素居中 */
            text-align: center; 
        }

        p {
            background-color: yellowgreen;
        }
    </style>
</body>
</html>

在这里插入图片描述

块级元素水平居中：margin: 0 auto

块级元素的水平居中使用text-align一般无法实现，这时候可以使用margin:0 auto;来实现。

确定块级元素自身的width属性后，设置margin-left和margin-right的值auto。

这时候不可以设置元素浮动，设置浮动后元素失去居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
        }

        p {
            background-color: yellowgreen;
            /* 确定元素自身宽度后，使用margin: 0 auto 确保元素自身水平居中 */
            width: 400px;
            margin: 0 auto;
        }
    </style>
</body>
</html>

在这里插入图片描述

单行文本垂直居中显示：line-height

只有一行文字的情况下，设置文字的line-height高度等于父级容器的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
        }

        p {
            background-color: yellowgreen;
            width: 400px;
            margin: 0 auto;
            /* 给文字的父级容器设置高度为64px */
            height: 64px;
            /* 设置文字行高等于父级容器高度，实现单行文字垂直居中 */
            line-height: 64px;
        }
    </style>
</body>
</html>

在这里插入图片描述

使用绝对定位实现居中显示(知道元素自身的宽度和高度)

绝对定位实现元素居中显示有一个前提条件，需要知道元素自身的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
        }

        p {
            background-color: yellowgreen;
            /* 确定元素自身的width 和 height */
            width: 400px;
            height: 64px;

            line-height: 64px;

            /* 设置元素绝对定位，top、left的值设为50% */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 再通过设置top、和left方向的外边距为一半宽度、一半高度的的负值 */
            margin-top: -32px;
            margin-left: -200px;
        }
    </style>
</body>
</html>

除了上面一种方法外，使用绝对定位实现元素居中显示还有一种方法，这种方法同样需要知道元素自身的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
        }

        p {
            background-color: yellowgreen;
            /* 确定元素自身的width 和 height */
            width: 400px;
            height: 64px;

            line-height: 64px;

            /* 设置元素绝对定位，top、left、right、bottom的值设为0 */
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            /* margin: auto 这个属性必须有 */
            margin: auto;
        }
    </style>
</body>
</html>

在这里插入图片描述

浮动元素居中显示（浮动+相对定位）

优点：不需要知道居中元素的宽度和高度
缺点：通过两次相对定位实现

原理：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="wraper">
            <p>我要居中显示！</p>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
        }

        .wraper {
            /* 设置元素浮动，让元素自适应内容宽度 */
            float: left;
            position: relative;
            top: 50%;
            left: 50%;
        }

        p {
            background-color: yellowgreen;
            position: relative;
            top: -50%;
            left: -50%;
        }
    </style>
</body>
</html>

在这里插入图片描述

使用flex布局实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <p>我要居中显示！</p>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%; 
            height: 100vh;
            background-color: aquamarine;
            text-align: center; 
            display: flex;
            /* 垂直居中弹性盒子的各项div元素 */
            align-items: center; 
            /* 水平居中 */
            justify-content: center;
            
        }

        p {
            background-color: yellowgreen;
        }
    </style>
</body>
</html>

在这里插入图片描述

CSS样式中居中显示的方式
Jsy_997的博客
04-15 3019
如何实现文本内容，块级盒子以及一些行内元素水平垂直居中。
div（固定宽度和不固定宽度）居中显示的方法总结
chuwu6098的博客
01-29 857
今天我总结一下css实现div居中的方法，有的是固定宽度的，还有的是不固定宽度的。 1.使用自动外边距实现DIV CSS居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为...
CSS 基础布局之溢出和对齐
叱咤少帅的博客
10-15 527
CSS 基础布局之溢出和对齐
div居中
qq_39114437的博客
06-09 2万+
HTML的div居中 一、margin:0px auto; 给需要居中的div设置一个宽度，然后设置元素的上下外边距为 相等 左右外边距为 auto，比如，margin:0px auto。 则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示， 可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素。 代码： <!DOCTYPE html> <html lang="
【CSS】几种让元素居中的方法（包括垂直居中和水平居中），网页示图
29的博客
10-17 1514
目录 前言 正文 一、让元素垂直居中显示的几种方法 二、让元素水平居中显示的几种方法 三、垂直居中一起使用的方法（上述结合使用） 总结 前言 实现元素居中其实有很多方法，掌握一种其实是不够的，因为在不同的布局和需求面前，就要选择不同的解决方案，有时候自己在设计页面的时候，居中也是一个比较苦恼的问题，下面就来分析一下各种实现居中的方法，以及不同场合的使用情况。 正文 一、让元素垂...
css实现图片居中的几种方式
Capgras的博客
09-16 6573
一、文本属性对齐text-align 二、巧用margin 三、绝对定位 四、弹性盒布局 五、栅格布局 eg.我希望图1能居中（图一变图二） 图一 图二 html <div id="pic"> <img src=star.jpg class="logo"> </div> 一、（最简单）文本属性对齐text-align text-ali...
CSS文字居中显示的几种方式
高先生的猫
02-21 1万+
1、利用line-height和vertical-align html <div class="box"> <span>测试文字</span> </div> css .box{ width: 200px; height: 200px; overflow: hidden; background: #c...
css居中的几种方式
weixin_34247155的博客
03-08 5491
水平居中 1.定宽块级元素 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 <style> div{ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style> <body> ...
CSS垂直居中的几种方法
m0_72838183的博客
10-04 8386
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
css 居中显示
weixin_54745621的博客
01-20 361
CSS 居中显示 css中设置居中显示 定位法：position：absolute 如果子控件有定义宽和高的话可以使用定位法。 注：margin-top和margin-left的值均为高和宽的一半。 margin：auto法 这个也可以是定位法。必须子空间设置宽的值否则没有效果。 margin：auto；是水平垂直都居中 margin：auto 0；是水平居中 margin：0 auto；是垂直居中 3．display：table-cell法 主要针对多行文字内容的垂直居中对齐。 text-align：ce
CSS 7种居中效果实现原理与案例
LlanyW的专栏
03-18 4674
左右偏移量+可见框宽度+左右外边距=包含块宽度。上下偏移量+可见框高度+上下外边距=包含块高度。配置项比较多，也是要指定盒子大小。/*绝对定位与变形结合实现：垂直水平居中*/让内部的文字在中间显示。
css居中的方法
weixin_73059608的博客
10-06 313
3.子块会继承text align：center;使得子块内的内联内容居中显示。在伸缩容器上设置侧轴对齐方式align-items: center。2.会对块元素中的所有内联内容，文本内容和被转换的内联块对齐。2.对块的子内容 text align：center;2.display单元格+verticle-align。1.只在块元素内部使用，直接用在内联元素上不生效。4.弹性布局display:flex;5.网格布局display：grid;二、块级元素垂直居中。
css多种方法让盒子居中
m0_51354601的博客
04-13 3007
将父容器设置为table布局，将子元素设置为table-cell布局，并设置vertical-align属性为middle即可实现居中效果。通过将元素的left和top属性设为50%，并使用transform属性将元素向左上方移动自己宽高的一半，即可使元素在父元素内居中。将父容器设置为flex布局，并通过justify-content和align-items属性对子元素进行水平和垂直居中。将父容器设置为grid布局，通过justify-items和align-items属性对子元素进行水平和垂直居中。
Html把图片居中显示（附怎么更改图片显示）
qq_64867440的博客
09-26 3万+
我的图像如下：我运行出来的图片如下图：html中输入： 我的代码如下： 方法2：使用margin属性 html 我的代码
实现居中布局的 8 种方式
一碗周
12-24 3321
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 实现居中布局的 8 种方式 .
8种css居中实现的详细实现方式了
buruyang的博客
07-12 2万+
八种实现方式，拿去用吧
css实现元素居中的6种方法
热门推荐
富朝阳的博客
09-22 4万+
相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。给定两个元素，这两个元素是父子级关系并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。
CSS中实现元素居中的七种方法
_江屿_
11-22 3258
CSS中实现元素居中的七种方法
居中显示-css样式
最新发布
wj0712的博客
06-22 693
这些方法都可以在微信小程序中有效地实现盒子内部盒子的居中显示。选择方法取决于你的具体需求、布局和浏览器的兼容性考虑。微信小程序支持使用类似于 CSS Flexbox 的布局方式。
CSS实现div的嵌套居中显示的多种方式
qq_55896432的博客
10-08 5074
本文介绍了多种前端css实现div居中的方式，并讲解了每种方式的注意事项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值