码迷,mamicode.com
首页 > 其他好文 > 详细

垂直居中的几种方法

时间:2018-06-01 23:18:52      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:bsp   css   表格   动态   inter   tab   html   splay   port   

方法一

这个方法把div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>垂直居中</title>
    <style type="text/css">
        #wrapper {
            display: table;    /*here*/
            background:blue;
            width:400px;
            height:200px;
        }
        
        #container {
            display: table-cell;       /*here*/       
            vertical-align: middle;    /*here*/
            background: yellow;
            width:300px;
            height:50%;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="container">
            我要用表格属性垂直居中,
            我要用表格属性垂直居中,
            我要用表格属性垂直居中,
            我要用表格属性垂直居中
        </div> 
    </div> 
</body>
</html>

 

实现如图:

技术分享图片

优点:

  • container 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, container 不会被截断
  • 例如
  •  #wrapper {
                display: table;    /*here*/
                background:blue;
                width:100px;
                height:100px;
            }
            
            #container {
                display: table-cell;       /*here*/       
                vertical-align: middle;     /*here*/
                background: yellow;
                width:50%;
                height:50%;
            }

    效果如图:技术分享图片

缺点:

  • Internet Explorer(甚至 IE8 )中无效,许多嵌套标签(其实还好)。
方法二

垂直居中的几种方法

标签:bsp   css   表格   动态   inter   tab   html   splay   port   

原文地址:https://www.cnblogs.com/sunmarvell/p/9123698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!