CSS 水平垂直居中详解

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量310 收藏 2
点赞数
分类专栏： 前端 文章标签： CSS水平居中 CSS垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012861467/article/details/79070582
版权

主要内容

介绍CSS样式中水平居中垂直居中的一些常用方法和实践。本文是从网上集思广益总结出来的，在实践过程中尝试多几次必定能有所收获。如有不正确的地方请指出，本人不胜感激（本人刚入门菜鸟一个大笑）。


水平居中

（1）行内元素

在父级元素设置text-align:center
 
<head>
    <meta charset="utf-8">
    <title>水平居中-行内元素text-align:center</title>
    <style>
    body {
        text-align: center;
    }
    
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        text-align: center;
    }
    </style>
</head>
<body>
    <span>行内元素水平居中</span>
<!-- text-align: center;对块级元素是没效果的 -->
    <div class="father">
        <span>行内元素水平居中</span>
    </div>
</body>
 

（2）确定宽度块级元素

设置margin-left:auto 和 margin-right:auto
<head>
    <meta charset="utf-8">
    <title>水平居中-确定宽度块级元素</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
    }
    .son {
        width: 50px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        background-color: #F16464;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

</html>


son不设宽高不见了：


 son单设高度：


（3）不确定宽度块级元素

a：使用table标签
table 不是块级元素，不设置宽度的情况下，由内部元素的宽度作支撑，所以仅设置margin-left:auto 和 margin-right:auto也可以实现居中。
<head>
    <meta charset="utf-8">
    <title>水平居中-不确定宽度块级元素(1)使用table标签</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
    }
    /*(3)不确定宽度块级元素水平居中，方式一：使用table
        margin-left: auto;
        margin-right: auto;
        */
    table {
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>
<body>
    <div class="father">
        <table>
            <tr>
                <td>
                    <div class="t2"><span>不确定宽度1</span></div>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>


 增加多一个元素作对比：
<table>
            <tr>
                <td>
                    <div class="t2"><span>不确定宽度1</span></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div style="width:30px;height:30px;background-color: #6060F1;"></div>
                </td>
            </tr>
        </table>
 
b：改变块级元素的display属性为inline类型

然后父容器使用text-align:center,缺点是变成行内元素之后不能设置长宽值。

<head>
    <meta charset="utf-8">
    <title>水平居中-display: inline</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        text-align: center;
    }
    .son {
        width:150px; /*inline-block 可以设置宽度 有效*/
        display: inline-block;
        border:2px solid #FA5B5B;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <span>不确定宽度2</span>
        </div>
    </div>
</body>

</html>


 如果设置为display: inline;宽度是没有效果的
 
c：给父元素设置float，position:relative和left:50%,子元素设置position:relative和left:-50%

缺点是position:relative带来的影响。

完整代码：
<head>
    <meta charset="utf-8">
    <style>
        .father{
             position:relative;/* 注释掉这句看效果*/
            left:50%;
            float:left;
        }
        .son{
             position:relative;
            left:-50%;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <span>元素水平居中</span>
        </div>
    </div>
</body>
</html>
 
d:相对定位+偏移量
注意：子元素相对居中的父元素要设置position:relatival;
<head>
    <meta charset="utf-8">
    <style>
        .father{
            width:500px;
            height:500px;
             position:relative;/* 注释掉这句看效果*/
            background-color: #DA91EE
        }
        .son{
            width:100px;
            height:100px;
             position:absolute;
            left:50%;
            margin-left:-50px;
            background-color: #68FC54
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <span>行内元素水平居中</span>
        </div>
    </div>
</body>

</html>


 去掉father的position:relative; son元素相对的是body元素居中


垂直居中

（1）父元素高度不确定的块级元素居中

在父容器设置相同上下边距
<head>
    <meta charset="utf-8">
    <title>垂直居中-父元素高度不确定的块级元素居中</title>
    <style>
    .father {
        /*width: 300px;
        height: 300px;*/
        background: orange;
        margin-top: 50%;
        margin-bottom: 50%;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #854CE9;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>
 

（2）父元素高度确定的单行文本垂直居中

父元素设置line-height的值跟父元素高度相同
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中-父元素高度确定的单行文本垂直居中</title>
        <style>
            .father{
                width:500px;
                 height:500px;
                background-color: #EBB2B2
            }
            .father span{
                 line-height: 500px;
            }
        </style>
    </head>
    <body>
    <div class="father">
        <span>垂直居中</span>
    </div>
    </body>
</html>
 

（3）父元素高度确定的多行文本、图片、块级元素的垂直居中

a：使用表格，vertical-align属性，vertical-align属性只对td和th生效
<head>
    <meta charset="utf-8">
    <title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法一：table</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #854CE9;
    }
    .mytable{ /* 要设置表格高 不然没有居中效果 */
        height:100%;
    }
    .mytable td{
    vertical-align:middle;
    }
    </style>
</head>
<body>
    <div class="father">
        <table class="mytable">
            <tr>
                <td>
                    <div class="son">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>


b：对支持display:table-cell的IE8和firfox浏览器使用display:table-cell和vertical-align:middle属性
对不支持display:table-cell的IE6和IE7，加多一层.hack 层绝对定位 top:50%; 再让 .cnt 层相对自身向上提50%。
 
<head>
    <meta charset="utf-8">
    <title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法二：display:table-cell</title>
    <style>
    .wrap {
        width: 500px;
        height: 500px;
        border: 3px solid #ddd;
        margin: 0 auto;
        padding: 20px;
        display: table;
        *position: relative;/*兼容IE6和7*/
    }
    
    .hack {
        border: 3px solid #433FF8;
        display: table-cell;
        vertical-align: middle;
        /*兼容IE6和7*/
        *position: absolute;
        *top: 50%;
    }
    
    .cnt {
        border: 3px solid #31F959;
        /*兼容IE6和7*/
        *position: relative;
        *top: -50%;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="hack">
            <div class="cnt">
                content
            </div>
        </div>
    </div>
</body>
</html>
 
c.绝对定位 和负边距
偏移可以使用margin-top: -本身高度一半px;或 transform: translateY(-50%);
<head>
    <meta charset="utf-8">
    <title>垂直居中-父元素高度确定的多行文本、图片、块级元素的垂直居中 法三：绝对定位和负边距</title>
    <style>
    *{
        margin:0 auto;
        padding:0;
    }
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        position: relative;
    }
    
    .son {
        width:100px;
        height:100px;
        background-color: #70FEFF;
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-50px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>


 d.绝对定位和0
注意;这里得确定内部元素的高度,不然默认填充父容器
<head>
    <meta charset="utf-8">
    <title>居中-绝对定位和0</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #4CF848;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>
 
e.Flex布局
<head>
    <meta charset="utf-8">
    <title>居中-最简单方式：Flex</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #4CF848;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

</html>


 f.display:inline-block
通过:after来占位。
<head>
    <meta charset="utf-8">
    <title>居中-display:inline-block</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
    }
    
    .father :after {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #4CF848;
        display: inline-block;
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

</html>


 g.display:flex和margin:auto
<head>
    <meta charset="utf-8">
    <title>居中-display:flex和margin:auto</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        display: flex;
    }
    .son {
        width: 100px;
        height: 100px;
        background: #4CF848;
        margin:auto;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

</html>


 h.display:-webkit-box
<head>
    <meta charset="utf-8">
    <title>居中-display:-webkit-box</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background: orange;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        -webkit-box-orient: vertical;
        text-align: center;
    }
    
    .son {
        width: 100px;
        height: 100px;
        background: #4CF848;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

</html>


 I.空div浮动
在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。
<head>
    <meta charset="utf-8">
    <title>居中-空div浮动</title>
    <style>
    .t1 {
        width: 500px;
        height: 500px;
        background-color: #FB6E6E;
    }
    /*跟占位符那种方法差不多*/
    
    .float_empty {
        float: left;
        height: 50%;
        margin-bottom: -150px;
        border: 5px solid #4352FA;
    }
    
    .t2 {
        clear: both;
        width: 300px;
        height: 300px;
        background: orange;
    }
    </style>
</head>
<body>
    <div class="t1">
        <div class="float_empty">
        </div>
        <div class="t2">
        </div>
    </div>
</body>

</html>


 注意：父窗体必须有确定高度，不然空div的height: 50%;属性无效
繁星点点-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS实现: 水平居中 的几种方法
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
CSS实现水平居中的几种方法
weixin_52099241的博客
05-05 2243
CSS实现水平居中的几种方法
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 1万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
【前端】CSS水平居中的6种方法
karshey的博客
08-11 2148
左右两边间隔相等的居中。
vertical-align:middle 和text-align：center
qq_48374573的博客
12-26 753
vertical-align:middle 和text-align：center vertical-align:middle 只适用于内联元素的垂直居中（在需垂直居中的元素中设置） text-align:center 用于设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中（在容器盒子中设置）。 margin:0 auto 设置块元素（或与之类似的元素）的居中。 ...
css实现元素水平垂直居中常见的两种方式实例详解
09-24
主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来一起看看吧。
CSS图片垂直居中实现方法详解
09-25
CSS图片垂直居中问题，困扰了我许久，今天终于可以总结下来了
CSS实现垂直居中的4种思路详解
09-24
给大家整理四种css实现垂直居中效果，思路明了非常不错，具有参考借鉴价值，需要的朋友参考下吧
CSS实现垂直居中的七个方法实例代码详解
12-14
，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法 设定行高（line-height） 添加伪元素 calc...
css实现文本内容水平居中的4个方法
爱分享
03-31 5349
以上是几种实现文本垂直居中和水平居中的方式，每种方式都有其适用的场景和优缺点。其中，利用margin:auto和position:absolute的方式需要知道元素的宽度和高度，适用于元素宽高固定的情况。利用table的方式比较适用于多行文本的垂直居中。可以给父元素设置display: flex，并给子元素设置align-items和justify-content属性来实现文本的水平垂直居中。利用position: absolute和top、bottom、left、right属性来实现文本的水平垂直居中。
CSS居中——水平居中、垂直居中方法
zg0601的博客
10-26 5407
CSS居中——水平居中（子元素有无宽度）、垂直居中（子元素有无高度）
Css---vertical-align 属性的用法与应用
前端与计算机相关知识的分享，博主的qq523235674
01-23 2918
一、在页面布局里，居中问题是非常常见的！ 1.有宽度的块级元素水平居中对齐，是margin:0 auto; 2.让文字居中对齐，是text-align:center; 而vertical-align：垂直对齐，它只针对行内元素或者行内块元素 先看w3c的官方说明： 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 先理解下基线是什么 基线的位置并不是固定..
CSS实现水平居中的六种方法
weixin_44805839的博客
09-15 562
父元素设置: margin: 0 auto; text-align: center;（行内/行内块元素）​​​​​​​​​​​​​​ 父元素设置: display:flex; 子元素设置: align-self:center; 父元素设置: display:table-cell; 子...
怎么应用vertical-align，才能生效？
zero的小纸条
01-22 3万+
vertical-align 的使用  以前总是想要一些元素垂直居中对齐，经常用line-height，可是对于图片来说，line-height的表现并不理想（非常不理想）可看我的文章：line-height系列（二） ，所以得用vertical-align:middle。然而用的时候总是无效，查了资料和实践后，终于知道vertical-align的用法了！   作用环境：父元素设置lin
CSS实现水平居中的四种方法
半夏_2021的博客
04-21 1320
CSS 实现水平居中的四种方法
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
【CSS 布局】水平垂直居中
我有满天星辰的博客
02-09 1690
创建一个父盒子，和子盒子
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 5995
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
06-07
好的，下面是关于HTML语言中div图片垂直居中和图片水平垂直居中的五种方法的图文详解。 ### 1. 使用CSS的flex布局 flex布局是CSS3新增的一种布局方式，可以很方便地实现元素的水平垂直居中。具体实现方法为： ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星点点-

请我喝杯咖啡呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值