zoukankan      html  css  js  c++  java
  • 使用css实现水平垂直居中

    1、通过absolute和margin实现(适用于弹窗,具体位置随浏览器屏幕大小变化改变)
    这种方式需要居中元素的父级必须采用绝对定位或相对定位,被居中元素的尺寸需要固定。
    <div class="frame">
    <div class="frame-child"></div>
    </div>
    css样式如下:
    .frame{
    position:relative;
    400px;
    height:400px;
    }
    .frame-child{
    position:absolute;
    200px;
    height:100px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
    }
    2、通过text-align、vertical-align和inline-block来实现
    这种方式需要借助一个依托dom来实现,父级尺寸需要给定。依托dom的高度需要和父级的高度一样。
    <div class="frame">
    <div class="frame-child"></div>
    <div class="frame-operate"></div>
    </div>
    css样式如下:
    .frame{
    600px;
    height:400px;
    text-align:center;
    }
    .frame-child{
    display:inline-block;
    height:200px;
    vertical-align:middle;
    }
    .frame-operate{
    display:inline-block;
    height:100%;
    vertical-align:middle;
    }
    3、通过line-height,text-align实现
    这种方式一般用于行内元素。
    <div class="frame">
    <div class="frame-child"></div>
    </div>
    css样式如下:
    .frame{
    400px;
    height:400px;
    text-align:center;
    line-height:400px;
    }
    .frame-child{
    display:inline-block;
    }
  • 相关阅读:
    Fragment入门代码
    Handler注意事项
    Handler处理消息
    Handler发送消息
    Hander创建消息
    handler四元素
    handler方法
    Handle的特点
    handler定义
    9Patch图
  • 原文地址:https://www.cnblogs.com/gaozhiqiang/p/7942725.html
Copyright © 2011-2022 走看看