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

实现垂直水平居中的方法

时间:2019-12-16 15:06:22      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:play   item   lock   display   情况   auto   ddl   tab   spl   


1. 定位 --- top 50% left 50%
(1) 知道宽高的情况下margin-left margin-top 给个 ( -1/2 宽高 )
(2) 不知道的请况 translate(-50%,-50%)
2. flex --- display:flex;
(1) 水平方向 justify-content:center
(2) 垂直方向 align-items: center
3. table-cell
(1) 父级元素display:table-cell;
(2) 垂直 vertical-align: middle;
(3) 水平 text-align: center;
(3) 内部子元素 display:inline-block;
4. 子元素绝对定位 top left right bottom 设置为 0 margin:auto;

实现垂直水平居中的方法

标签:play   item   lock   display   情况   auto   ddl   tab   spl   

原文地址:https://www.cnblogs.com/sphjy/p/12049021.html

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