元素居中问题

宽度居中:

一.对于块级元素

1.直接margin:0 auto;

2.position:absolute;left:50%;margin-left:负的他本身宽度的一半(适用于知道宽度的)

3.css3 transform:translateX(-50%)

4.css3 弹性盒模型 justify-content:center

二.对于行级元素

1.text-align:center

2.和块级元素一样

高度居中:

一.对于块级元素

1.position:absolute;top:50%;margin-top:负的它本身高度的一半;

2.css3 transform:translateY(-50%)

3.css3 弹性盒模型 align-items:center

4.display:table;vertical-align:middle

二.对于行级元素

1.line-height:height

2.和块级元素相同

 

posted @ 2018-10-23 19:04  wkkke  阅读(108)  评论(0编辑  收藏  举报