水平居中

方案一

位置 属性名 值 意义
父div text-align center 让子元素居中
子div display inline-block 可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。inline-block的宽度是其中文字的宽度。
子div text-align left 让子元素中的文字不继承父div 的  text-align:center属性, 设置为默认的text-align:left
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中--方案一</title>
    <style type="text/css">
    /*优点：兼容IE低版本浏览器*/
    .parent{ text-align: center; }
    .child{display: inline-block;
            text-align: left;}
    </style>
</head>
<body>
    <div class="parent" style="width: 400px;height: 100px;background: red;">
        <div class="child" style="width: 80px;height: 100px;background: green;">
            <h1>DEMO</h1>
        </div>
    </div>
</body>
</html>

 

image

 

 

 

方案二

位置 属性名 值 意义 兼容性
子div display table table的表现上和block非常像，但是它和block元素有区别，『宽度也是跟着内容走』 IE8以上
子div margin 0 auto 上下为0  左右为『自动』  
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中table_margin</title>
    <style type="text/css">
    .child{display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: red;">
    <div class="child" style="height: 100px;background: green;text-align: center">DEMO</div>
</div>
</body>
</html>

image

 

 

 

方案三---绝对定位+transform

位置 属性名 值 意义 兼容性
父div position relative 相对定位，将父元素设置为一个参照物  
子div position absolute 绝对定位，宽度由内容决定  
子div left 50% 把子div的左边缘设置在其父元素左边缘向右 父元素50%宽度的位置：  
子div transform 0 auto 上下为0  左右为『自动』 css3新增，IE老版本不支持
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中absolute_transform</title>
    <style type="text/css">
    .parent{
        position: relative;
    }
    .child{
        position: absolute; /* absolute元素默认没有宽度，宽度由内容决定*/
        left: 50%;  /*以父元素为参照物,向左移动父类元素宽度的50%*/
        transform: translateX(-50%);  /*css3新增 以自身的宽度的50%向左边移动 */
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="width: 200px;height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

image

缺点： transform 属性为css3新增，IE老版本(IE6,7,8)中无法使用。

 

 

 

方案四

位置 属性名 值 意义 兼容性
父div display flex 父元素的display 为 flex时，子元素自然就成为了flex item。flex 默认情况下，宽度是auto的。  
父div justify-content center

项目位于容器的中心。

  
或者        
子div margin 0 auto    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中flex_justify-content</title>
    <style type="text/css">
    .parent{
        display: flex;    /* 当父类元素是display为flex时，其中的子元素就会变为 flex item，子元素的宽度就为文字的实际宽度  */
        justify-content: center;
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

image

 

 

 

或者，在子元素中设置 margin 属性：上下为0 ，左右自动（居中）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平居中flex_justify-content</title>
    <style type="text/css">
    .parent{
        display: flex;    /* 当父类元素是display为flex时，其中的子元素就会变为 flex item，子元素的宽度就为文字的实际宽度  */
    }
    .child{
        margin: 0 auto;
    }
    </style>
</head>
<body>
<div class="parent" style="width: 400px;height: 100px;background: #403f42;">
    <div class="child" style="height: 100px;background: red;color: white;">
        DEMO
    </div>
</div>
</body>
</html>

效果相同

image

 

缺点：  flex 在IE低版本中不支持。

posted @ 2016-10-28 18:10  刘江龙  阅读(407)  评论(0)  编辑  收藏  举报