zoukankan      html  css  js  c++  java
  • 上下左右 居中父元素

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>上下左右居中</title>
        
    </head>
    <body>
    
        <!--  <style type="text/css">
            .parent{
                 400px;height: 200px;background: #797099;
                position: relative;
                
            }
            .child{
                background: #eee;
                 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{
                 400px;height: 200px;background: #797099;
                position: relative;
            }
            .child{
                 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{
                 400px;height: 200px;background: #797099;
                position: relative;
            }
            .child{
                 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{
                 400px;height: 200px;background: #797099;
                display:table-cell;
                vertical-align:middle;
                
            }
            .child{
                 200px;background: #eee;    
                border:2px solid #333;
                margin: 0 auto;            
            }
    
        </style>
        <div class="parent" >
            <div class="child">
                
                上课打瞌睡就打瞌睡的所得税看电视的
            </div>
        </div> 
     -->
    
    
    
    <!-- 
     <style type="text/css">
            .parent{
                 400px;height: 200px;background: #797099;
                display:table-cell;
                vertical-align:middle;
                text-align: center;
                
            }
            .child{
                 200px;background: #eee;    
                border:2px solid #333;
                display: inline-block;        
            }
    
        </style>
        <div class="parent" >
            <div class="child">
                
                上课打瞌睡就打瞌睡的所得税看电视的
            </div>
        </div> 
     -->
    
    
    
    <!-- 
         <style type="text/css">
            .parent{
                 400px;height: 200px;background: #797099;
                display: flex;
                
            }
            .child{
                 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{
                 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{
                 200px;
                height: 100px;
                background: #eee;    
                border:2px solid #333;
                
            }
    
        </style>
        <div class="parent" >
            <div class="child">            
                房子 车子  男子 儿子 票子 啥用呢?
            </div>
        </div>  -->
    
    
    
    
    
    
    <!-- 
        <style type="text/css">
            .parent{
                400px;height: 200px;background: #797099;
                position: relative;
            }
            .child{    
                 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>
  • 相关阅读:
    URAL 2067 Friends and Berries (推理,数学)
    URAL 2070 Interesting Numbers (找规律)
    URAL 2073 Log Files (模拟)
    URAL 2069 Hard Rock (最短路)
    URAL 2068 Game of Nuts (博弈)
    URAL 2066 Simple Expression (水题,暴力)
    URAL 2065 Different Sums (找规律)
    UVa 1640 The Counting Problem (数学,区间计数)
    UVa 1630 Folding (区间DP)
    UVa 1629 Cake slicing (记忆化搜索)
  • 原文地址:https://www.cnblogs.com/jinsuo/p/6846500.html
Copyright © 2011-2022 走看看