详解HTML5中垂直上下居中的解决方案


Posted in HTML / CSS onDecember 20, 2017

在CSS中,则要吐槽一下,利用margin:0 auto;可以达到水平方向的居中,但是margin: auto 0则无法达到垂直方向的居中。

这里主要还是由于没有对父控件即控件本身进行正确的定位。直接看代码, 首先对父控件需要使用相对布局,之后对子控件需要使用绝对布局,并且利用top,和bottom属性,结合margin: auto 0;,则可以达到效果。

.container-vertical {
      position: relative;
      width: 100%;
      height: 200px;
      background: deepskyblue;
      margin-bottom: 20px;
}
        
.container-vertical-item {
    position: absolute;
    width: 130px;
    height: 80px;
    text-align: center;
            background: yellow;
        line-height: 80px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

详解HTML5中垂直上下居中的解决方案

垂直方向上居中.png

水平垂直方向居中

有了5.2的经验,我们可以尝试设置子控件的left和right,top,bottom属性都为0,并且margin: auto;四个方向上都是自动外边距。则可以达到这样的效果。其中需要注意的子控件需要必须是display: block; 属性。

看代码

.container-horization-vertical {
    position: relative;
    width: 100%;
    height: 200px;
    background: deepskyblue;
    margin-bottom: 20px;
}
        
.container-horization-vertical-item {
    position: absolute;
    width: 150px;
    height: 80px;
    background: yellow;
    line-height: 80px;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

详解HTML5中垂直上下居中的解决方案

小结: 这种方案在解决一些不算复杂的页面布局时还是很不错的,可以适配任何界面以及几乎所有的浏览器。但对于十分复杂的页面可能会需要其他的解决方案,但是从这个思路出发也可以得到启示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 #HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 #HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 #HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 #HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
名片管理系统python版
2018/01/11 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python保存数据到本地文件的方法
2018/06/23 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
浅析python内置模块collections
2019/11/15 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python设计密码强度校验程序
2020/07/30 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
linux下进程间通信的方式
2013/01/23 面试题
校园达人秀策划书
2014/01/12 职场文书
培训讲师岗位职责
2014/04/13 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
会议简报格式范文
2015/07/20 职场文书