首页 > 代码库 > CSS：水平居中、垂直居中
CSS：水平居中、垂直居中
水平居中
- margin：0 auto大法
.child{ width：100px；margin：0 auto }
注意：子元素要有宽度才可以使用
- display：table大法
.child{ display:table; margin:0 auto; }
- text-align：center大法
普通子元素在父元素中
.parent{ text-align：center }
.child{ display:inline-block }
若父元素内是文字，可以不用以内联块状元素形式展示，因为我觉得文字就带有内联属性
.parent{ text-align：center }
- 绝对定位大法
.parent{ position:relative }
.child{ position:absolute; left:50%; transform:translate(-50%) }
太神奇了！！是呀！！我怎么没想到！！
（1）定位要是absolute（2）移动为-50%，负值
另：
.parent{ position:relative }
.child{ position:absolute; left:50%;margin-left:-元素宽度 } // 必须要知道子元素的宽度
- display：flex大法
css3待续
垂直居中
- vertical-align大法
.parent{ display:inline-block; vertical-align:middle; line-height:200px; }
.parent{ display:table-cell; vertical-align:middle; height:200px; }
vertical-align和line-height（height）更配哦~~
有趣了，控制的是父元素，居中的是子元素
- 绝对定位大法
.parent{ position:relative }
.child{ position:absolute; top:50%; transform:translateY(-50%); }
flex大法
水平垂直居中
几种方式可供参考
方式一：
.parent{display:table-cell;vertical-align:middle;text-align:center;height: 100px;width: 200px;}
.child{display:inline-block;}
方式二：
.parent{ position:relative; }
.child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
CSS：水平居中、垂直居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。