关于居中

水平居中:

1.text-align:center

2.margin:0 auto;

需要设置内容宽度;

 

垂直居中;

1.vertical-align:middle

该属性适用于只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。例如图片,按钮,单复选框,单行/多行文本框等HTML控件;

 

2.line-height

该属性适用于单行文本的垂直居中;多行文字的垂直居中可以使用span标签将文本包裹,然后使用vertical-align属性使其居中;

 

3.以下是关于内容垂直居中的实用方法

方法1:position+margin
方法2:float+height+margin
方法3:position+margin;IE8-不支持
复制代码
<html>
<head>
    <title>垂直居中</title>
    <meta charset="utf8">
    <style type="text/css">
        .contain{
            height:800px;
            width: 800px;
            border: 1px solid #000;
            position: relative;
        }
        .one{
            height:600px;
            width: 400px;
            border: 1px solid #000;
            position: absolute;
            top:50%;
            margin-top: -300px;
        }

        .two{
            height:300px;
            width: 200px;
            border: 1px solid red;
            clear: both;
        }
        .two_1{
            height:50%;
            margin-bottom: -150px;
            float: left;
        }
        .three{
            width: 200px;
            position: absolute;
            margin: auto;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            height:400px;
            border: 1px solid green;
        }*/
    </style>
</head>

<body>
    
    <div class="contain">
        <div class="one">方法1:position+margin负值</div>
        <div class="two_1"></div>
        <div class="two">方法2:float+height+margin负值</div>
        <div class="three">方法3:position+margin;IE8-是不支持的,实现垂直水平居中</div>
    </div>
</body>
</html>
复制代码

 

 

注意:top:50%需要定位为absolute时才有效

posted @   Bigdots  阅读(231)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示