详解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和HTML5的支持状况
Oct 31 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
详解HTML5.2版本带来的修改
May 06 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
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
PHP实现微信提现功能
2018/09/30 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python k-近邻算法实例分享
2014/06/11 Python
python读取LMDB中图像的方法
2018/07/02 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
物业管理应届生求职信
2013/10/28 职场文书
酒店个人求职信范文
2014/01/25 职场文书
升职自我推荐信范文
2015/03/25 职场文书
毕业实习感受与体会
2015/05/26 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
nginx优化的六点方法
2021/03/31 Servers
php微信小程序解包过程实例详解
2021/03/31 PHP