CSS水平垂直居中之fit-content布局

实现一个元素水平垂直居中的方法很多：

  • 元素未知宽高

width和height的fit-content值只支持Chrome和Firefox浏览器

 1 .box {
 2     position: absolute;
 3     top: 0;
 4     left: 0;
 5     bottom: 0;
 6     right: 0;
 7     margin: auto;
 8     width: fit-content;
 9     width: -webkit-fit-content;
10     width: -moz-fit-content;
11     height: fit-content;
12     height: -webkit-fit-content;
13     height: -moz-fit-content;
14     overflow: hidden;
15     text-align: center;
16     background-color: #eee;
17 }
  • 元素已知宽高

大家对这个应该是很了解的，也是实际开发中运用最多的，推荐给刚刚入门的小伙伴吧。

设置它的父元素为position:relative即可：

第一种方式：

 1 .children{
 2     position: absolute;
 3     top: 0;
 4     bottom: 0;
 5     left: 0;
 6     right: 0;
 7     margin: auto;
 8     width: 300px;
 9     height: 200px;
10     background-color: #5f9a3f;
11 }

第二种方式：

1 .children{
2     position: absolute;
3     top: 50%;
4     left: 50%;
5     margin: -100px 0 0 -150px;
6     width: 300px;
7     height: 200px;
8     background-color: #5f9a3f;
9 }

第三种方式：

使用CSS3新属性transform的translate属性

1 .children{
2     position: absolute;
3     top: 50%;
4     left: 50%;
5     transform: translate(-50%,-50%);
6     width: 300px;
7     height: 200px;
8     background-color: #5f9a3f;
9 }

感谢阅读，欢迎大家来吐糟。

 

posted @ 2018-01-16 11:14  陈小哇  阅读(2526)  评论(0)  编辑  收藏  举报