详解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 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
推广普通话的宣传语
2015/07/13 职场文书
环保建议书作文400字
2015/09/14 职场文书