水平居中
(1)使用 inline-block+text-align
- <div class="parent">
- <div class="child">demo</div>
- </div>
- .child {
- display:inline-block;
- }
- .parent {
- text-align:center
- }
原理: 先将子框由块级元素改变为行内块元素, 再通过设置行内块元素居中以达到水平居中.
优点: 兼容性好, 甚至可以兼容 ie6,ie7
(2)使用 table+margin
- .child {
- display:table
- margin:0 auto;
- }
原理: 先将子框设置为块级表格来显示, 再设置子框居中以达到水平居中.
缺点: 不支持 ie6,ie7, 将 div 换成 table
(3)使用 absolute+transform
- .child {
- position:absolute;
- left:50%;
- transform:translateX(-50%)
- }
- .parent {
- position:relative
- }
缺点: transform 属于 CSS3 内容, 兼容性存在一定问题, 高版本浏览器需要添加一些前缀
(4)使用 flex+margin
- .child {
- margin:0 auto
- }
- .parent {
- display:flex
- }
缺点: 低版本浏览器 (ie6 ie7 ie8) 不支持
(5)使用 flex+justify-content
- .parent {
- display:flex;
- justify-content:center
- }
缺点: 低版本浏览器 (ie6 ie7 ie8) 不支持
垂直居中
(1)使用 table-cell+vertical-align
- .parent {
- display:table-cell;
- vertical-align:middle
- }
(2)使用 absolute+transform
- .child {
- position:absolute;
- top:50%;
- transform:translateY(-50%)
- }
- .parent {
- position:relative
- }
缺点: transform 属于 css3 内容, 兼容性存在一定问题, 高版本浏览器需要添加一些前缀
(3)使用 flex+align-items
- .parent {
- position:flex;
- align-items:center;
- }
水平垂直居中
(1)使用 absolute+transform(未知高度)
- .parent {
- position:relative;
- }
- .child {
- position:absolute;
- left:-50%;
- top:-50%
- transform:tranplate(-50%,-50%)
- }
(1.1)使用 absolute+transform(已知高度)
- .parent {
- position:relative;
- }
- .child {
- position:absolute;
- width:100px;
- height:100px;
- left:-50%;
- top:-50%
- margin: -50px 0 0 -50px;
- }
(2)使用 inline-block+text-align+table-cell+vertical-align
- .parent {
- text-align:center;
- display:table-cell;
- vertical-align:middle;
- }
- .child {
- display:inline-block;
- }
优点: 兼容性较好
(3)使用 flex+justify-content+align-items
- .parent {
- display:flex;
- justify-content:center;
- align-items:center;
- }
缺点: 兼容性存在一定问题
来源: http://www.bubuko.com/infodetail-2603629.html