Fork me on GitHub

李可

导航

div居中（内容+元素：水平+垂直）

内容水平居中

text-align: center;

内容垂直居中

/*第一种 行内垂直居中*/
    height: 43px;
    line-height:43px;
   

   /*我们将行距增加到和整个div一样高
    line-height:43px;然后插入文字，就垂直居中了。*/

/*第二种*/

    vertical-align:middle;
    display:table-cell;  /*将对象作为表格单元格显示 */

 此div水平居中

 

margin:0px auto;

 

 此div垂直居中

/*1，设置position:realitive;
   2，设置top：-50%;
   3，设置margin-top：....减去此元素的高度的一半+减去此元素的补白+减去此元素的边框宽度
   4，加入此元素有兄弟元素，那+减去兄弟元素的高度
*/
           position: relative;
            top: 50%;
            margin-top: -350px; /*width/2+padding+border +兄弟节点高度200/2px+30px+20px+200*/

 

DEMO:div内容水平垂直居中+div内的div水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
        #test1
        {
            margin: 0px auto;
            padding: 0px;
            width: 400px;
            height: 400px;
            border: 2px solid red;
            text-align: center; /*会让此元素的内容和子元素的内容水平居中，注意：此元素和子元素并不水平居中*/
        }
        span
        {
            line-height: 200px; /* font-size: 200px;*/
        }
        #test2
        {
            margin: 0px auto; /*会让此元素水平居中，注意：此元素垂直并不居中*/
            position: relative;
            top: 50%;
            margin-top: -350px; /*width/2+padding+border 200/2px+30px+20px*/
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 20px dotted blue; /* display: table-cell;     此元素内容垂直居中第一种写法
            vertical-align: middle;*/
            line-height: 200px; /*  此元素内容垂直居中第二种写法，和div高度相等设置行高*/
        }
    </style>
</head>
<body>
    <div id="test1">
        <span>我是test1的span标签，别弄错了</span>
        <div id="test2">
            我是test1的字体内容
        </div>
    </div>
</body>
</html>

结果

posted on 2016-01-20 17:29  李可在江湖  阅读(13686)  评论(0)  编辑  收藏  举报