盒子布局居中实现

最新推荐文章于 2023-11-03 10:33:06 发布

weixin_34249367

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量86

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2472316/blog/834838

版权

2019独角兽企业重金招聘Python工程师标准>>>

水平居中问题

使用inline-block 和 text-align实现

.parent{text-align: center;} .child{display: inline-block;}
使用margin:0 auto来实现

.child{width: 200px; margin: 0 auto;}
使用table实现

.child{display: table; margin: 0 auto;}
使用绝对定位实现

.parent{position:relative;} .child{position:absolute; left:50%; transform:translate(-50%);} /或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好/

5.实用flex布局实现

/*第一种方法*/
.parent{display:flex; justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}

display:box;不兼容问题解决，我们需要把Flexbox旧的语法、中间过渡语法和最新的语法混在一起使用，在这里他们的顺序显得非常重要。“display”属性本身并不添加任何浏览器前缀，我们需要确保我们老语法不要覆盖新语法让浏览器（可能总是会）同时支持。

.parent {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.child {
	 -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	 -moz-box-flex: 1;         /* OLD - Firefox 19- */
	 width: 20%;               /* For old syntax, otherwise collapses. */
	 -webkit-flex: 1;          /* Chrome */
	 -ms-flex: 1;              /* IE 10 */
	 flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

垂直居中

1.vertical-algin:middle

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。==在使用vertical-align的时候==，由于对齐的基线是用行高的基线作为标记，==故需要设置line-height或设置display:table-cell;==

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

使用绝对定位

.parent{position:relative;} .child{positon:absolute; top:50%; transform:translate(0,-50%);}
用flex实现

.parent{display:flex; align-items:center;}

转载于:https://my.oschina.net/u/2472316/blog/834838