上下左右 居中父元素 

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上下左右居中</title>
    
</head>
<body>

    <!--  <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            position: relative;
            
        }
        .child{
            background: #eee;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-top: -50px;
            margin-left: -50px;
            
        }
    </style>
    <div class="parent" >
        <div class="child">是大家发卡上就大发送快递费就爱上的 </div>
    </div> 

 -->




  <!-- 第一种方法 -->
    <!-- <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            position: relative;
        }
        .child{
            width: 200px;height: 100px;background: #eee;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 100px);
        }
    </style>
    <div class="parent" >
        <div class="child"></div>
    </div> -->




<!-- 第二种方法 -->
    <!-- <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            position: relative;
        }
        .child{
            width: 200px;height: 100px;background: #eee;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin:auto;            
        }

    </style>
    <div class="parent" >
        <div class="child"></div>
    </div> 
 -->

<!-- 
     <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            display:table-cell;
            vertical-align:middle;
            
        }
        .child{
            width: 200px;background: #eee;    
            border:2px solid #333;
            margin: 0 auto;            
        }

    </style>
    <div class="parent" >
        <div class="child">
            
            上课打瞌睡就打瞌睡的所得税看电视的
        </div>
    </div> 
 -->



<!-- 
 <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
            
        }
        .child{
            width: 200px;background: #eee;    
            border:2px solid #333;
            display: inline-block;        
        }

    </style>
    <div class="parent" >
        <div class="child">
            
            上课打瞌睡就打瞌睡的所得税看电视的
        </div>
    </div> 
 -->



<!-- 
     <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            display: flex;
            
        }
        .child{
            width: 200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;
            margin:auto    
        }

    </style>
    <div class="parent" >
        <div class="child">            
            房子 车子  男子 儿子 票子 啥用呢？
        </div>
    </div> 

 -->

<!-- 
    <style type="text/css">
        .parent{
            width: 400px;height: 200px;background: #797099;
            display: flex;
            justify-content: center; /*属性定义了项目在主轴上的对齐方式。 flex-start | flex-end | center | space-between | space-around;*/
                                    /*
                                    flex-start（默认值）：左对齐
                                    flex-end：右对齐
                                    center： 居中
                                    space-between：两端对齐，项目之间的间隔都相等。
                                    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/

            align-items: center; /* 属性定义项目在交叉轴上如何对齐*/

                                /*flex-start：交叉轴的起点对齐。
                                flex-end：交叉轴的终点对齐。
                                center：交叉轴的中点对齐。
                                baseline: 项目的第一行文字的基线对齐。
                                stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                                            */
        }
        .child{
            width: 200px;
            height: 100px;
            background: #eee;    
            border:2px solid #333;
            
        }

    </style>
    <div class="parent" >
        <div class="child">            
            房子 车子  男子 儿子 票子 啥用呢？
        </div>
    </div>  -->






<!-- 
    <style type="text/css">
        .parent{
            width:400px;height: 200px;background: #797099;
            position: relative;
        }
        .child{    
            width: 300px;
            
            background: #eee;    
            border:2px solid #333;

            position: absolute;
            left: 50%;  父元素的50%
            top: 50%;     父元素的50%
            transform:translate(-50%,-50%);        
            
    </style>
    <div class="parent" >
        <div class="child">            
            房子 车子  男子 儿子 票子 啥用呢？sadfasdfas水电费是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶地方士大夫撒的方法反反复复方法反反复复反复 
        </div>
    </div> 
 -->











</body>
</html>

 

posted @ 2017-05-12 17:27  Jinsuo  阅读(144)  评论(0)    收藏  举报