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;
    }
  • 相关阅读:
    rsync备份服务器搭建学习笔记
    switch case
    常见http状态码
    正则去除html字符串中的注释、标签、属性
    2018-10-10 10:00 从今日开始记录
    Qt dialog 的geometry()
    Qt禁止最大和最小化
    tableWidget删除除了头外的内容并释放
    Qt QTabBar 实现宽度调整,非QSS
    Qt 歌词有关内容
  • 原文地址:https://www.cnblogs.com/gaozhiqiang/p/7942725.html
Copyright © 2011-2022 走看看