让div中的内容垂直居中

最新推荐文章于 2020-11-12 16:27:38 发布

qq_33491173

最新推荐文章于 2020-11-12 16:27:38 发布

阅读量284

点赞数

分类专栏：随手笔记文章标签： div内容居中

随手笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

代码如下	复制代码
p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

代码如下	复制代码
p { padding:30px; }

这段代码的效果和line-height法差不多。

三、模拟表格法

模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。先看下面的Html代码：

代码如下	复制代码
<div id="box"> <div id="content">居中显示</div> </div>

参照以上Html代码，让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：

代码如下	复制代码
#wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }

但这种方法有一个弊端，由于IE浏览器对高度理解会产生错误，所以这种方法仅对Firefox有效，对IE无效，既然这样，我们就需要找出对IE的修正方法，于是有了另外一种方法。
四、定位法

顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。它的Html代码为：

代码如下	复制代码
<div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>

这段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，再让content中的真正内容出于sub垂直方向的-50%，从而制作出content在box中垂直居中的效果，它们的CSS代码如下：

代码如下	复制代码
#wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }

这段代码无论是在IE中还是Firefox中，都能正常居中了

实例

方案一：

主要原理是标准浏览器下用table和table-cell布局，然后用vertical-align:middle居中元素，但IE67不支持table布局，所以用了用了css hake，就是带#开头的属性

代码如下

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <style type="text/css">
        #outer{
            width:500px;
            height:200px;
            margin: 50px auto;
            border:1px solid #CCC;
            display:table;
            text-align:center;
            #position:relative;
        }
        #middle{
            display:table-cell;
            vertical-align:middle;
            #position:absolute;
            #top:50%;
            #left:50%;
        }
        #inner{
            #position:relative;
            #top:-50%;
            #left:-50%;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="middle">
            <img id="inner" src="logo_small.gif"/>
        </div>
    </div>
</body>
</html>

方案二:

用负margin实现，但缺点是要知道居中内容的宽度和高度。

代码如下

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <style type="text/css">
        #outer{
            width:500px;
            height:200px;
            margin: 50px auto;
            border:1px solid #CCC;
            position:relative;
        }
        #inner{
            position:relative;
            left:50%;
            top:50%;
            margin-left:-71px;
            margin-top:-27px;
        }
    </style>
</head>
<body>
    <div id="outer">
            <img id="inner" src="logo_small.gif"/>
    </div>
</body>
</html>