关于居中

水平居中：

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 @ 2015-07-14 14:32  Bigdots  阅读(228)  评论(0)  编辑  收藏  举报