码迷,mamicode.com
首页 > 其他好文 > 详细

(学习笔记)页面布局解决方案二

时间:2016-08-20 12:56:05      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

垂直居中解决方法:

方法1:table-cell+vertical-alignl

.parent{display:table-cell;vertical-align:middle;}

方法2:absolute+transform

.parent{position:relativee;}

.child{position:absolut;top:50%;transform:translateY(-50%);}

方法3:flex+align-items

.parent{display:flex;align-items:center;}

 

居中方法:

方法1:inline-block+text-align+table-cell+vertical-align

.parent{text-align:center;display:table-cell;vertical-align:middle;}

.child{display:inline-block;}

方法2:absolute+transform

.parent{position:relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

方法3:flex+justify-content+align-items

.parent{display:flex;justify-content:center;align-items:center;}

 

(学习笔记)页面布局解决方案二

标签:

原文地址:http://www.cnblogs.com/stephenxio/p/5790058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!