zoukankan      html  css  js  c++  java
  • CSS垂直居中的方法

    水平居中的方法很简单,通常都是一个margin:0 auto搞定,但是垂直居中就没有那么简单了。首先来说说垂直居中的几种情况。

    1、文字垂直居中

    文字垂直居中的方法一般是设置高度与行高一致,然后文字就垂直居中了。来看下面的示例:

    <html>
    <head>
    <meta charset="gb2312" />
    <title>高度自适应布局</title>
    <style>
        p{
            height:100px;
            background-color:#dcdcdc;
            color:#333;
        }
    </style>
    </head>
    <body>
        <div>
            <p style="line-height:100px;">    
                这是一行文字    
            </p>
        </div>
    </body>
    </html>

    其显示效果如下:

    2、将一个div垂直居中
    下面来将一个div设置到整个浏览器的中间,要设置到浏览器的中间,所以我们就要求页面要占满整个浏览器,所以从html、body要逐层设置其高度为100%。

    <html>
    <head>
    <meta charset="gb2312" />
    <title>高度自适应布局</title>
    
    <style>
    html, body{
        height: 100%;
    }
    
        div{
            width:200px;
            height:200px;
            background-color:#dcdcdc;
    
            position: relative; 
            top: 50%; /* 向下偏移50% */
            transform: translateY(-50%);    /* 再向上偏移50% */
        }
    </style>
    
    </head>
    <body>
        <div>
        </div>
    </body>
    </html>

    其效果如下所示:

    3、CSS3新属性设置居中
    如果是CSS3,则可以设置外层的display为flex,然后align-items为center,justify-content为center也可以实现垂直居中的效果。

    <html>
    <head>
    <meta charset="gb2312" />
    <title>高度自适应布局</title>
    
    <style>
    html, body{
        height: 100%;
    }
    
    body{
        display: flex;
        align-items: center; /*定义body的元素垂直居中*/
        justify-content: center; /*定义body的里的元素水平居中*/
    }
    
    div{
        width:200px;
        height:200px;
        background-color:#dcdcdc;
    }
    </style>
    
    </head>
    <body>
        <div>
            
        </div>
    </body>
    </html>

    效果如下所示:

    4、绝对定位实现居中
    还有一种可以应用绝对定位实现居中的,我们都知道绝对定位是根据其最近relative、absolute父元素来定位的,使用这种方式,我们根本都不需要设置那么多的height:100%,只需要将其父元素设置成relative就可以了,想它相对于那个元素居中就相对于哪个元素居中。来看示例:

    <html>
    <head>
    <meta charset="gb2312" />
    <title>高度自适应布局</title>
    
    <style>
    .div_outer{
        width:400px;
        height:400px;
        border:1px solid blue;
        position:relative;
    }
    .center_middle{
        width:200px;
        height:200px;
        background-color:#dcdcdc;    
    
        margin: auto;  
        position: absolute;  
        top: 0; left: 0; bottom: 0; right: 0;  
    }
    </style>
    
    </head>
    <body>
        <div class="div_outer">
            <div class="center_middle">
                
            </div>
        </div>
    </body>
    </html>

    其效果如下:

     

    来源文章:

    http://blog.csdn.net/freshlover/article/details/11579669

    http://www.cnblogs.com/yugege/p/5246652.html

  • 相关阅读:
    Navicat Premium12以上版本多用户破解方法
    Linux并行gzip压缩工具pigz
    Windows Server 2019远程桌面服务配置和授权激活
    mysql删除大表
    KVM qcow2 磁盘在线扩容方法
    在jenkins中连接kubernetes集群
    CentOS 7部署 Ceph分布式存储架构
    (转)关于T(n) = kT(n/c) + f(n) 的时间复杂度
    算法中的思想(第0篇)
    (求通俗易懂的证法) 过n个有标志顶点的树的数目等于n^(n-2)
  • 原文地址:https://www.cnblogs.com/kissdodog/p/6394149.html
Copyright © 2011-2022 走看看