行内元素和块级元素居中

Posted 2020-08-13

内联元素

水平居中

1、行内元素居中：设置text-align:center;

2、flex布局：设置display:flex;justify-content:center;

垂直居中

父元素高度是单行文本：设置height=line-height;

父元素确定的是多行文本：a:插入table, 然后设置vertical-align:middle;

　　　　　　　　　　　　b:先设置display:table-cell;然后设置vertical-align:middle;

块级元素

水平居中

1、定宽块级元素：设置左右margin为auto

2、不定宽块级元素：a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；

　　　　　　　　　  b:给该元素设置display:inline;

　　　　　　　　　  c:父元素设置postion:relative;子元素设置position:absolute;left:50%;

垂直居中

使用position:absolute

利用display:table-cell

css3新特性transform:translate(x,y);

 

元素的垂直居中有哪些解决方案？