浅谈居中问题
概述
谈到居中,想必在工作中经常碰到该问题。水平居中,垂直居中,已知元素宽高,未知元素宽高等情况。
居中元素主要有以下两种
1. 行内元素居中
2. 块元素居中
居中情况主要有以下两种
1. 已知元素宽高居中
2. 未知元素宽高居中
行内元素居中
水平居中
方法一:父元素设置text-align: center;即可
垂直居中
方法一:父元素设置line-height即可
方法二:父元素设置padding-top、padding-bottom
水平垂直居中
方法:设置text-align:center; line-height即可
块元素居中
水平居中
方法一:margin: 0 auto;
方法二:改变块元素为行内块元素 display: inline-block;
方法三:定位 position
方法四:flex布局
方法五:box布局