网页元素居中的多种方法

一 水平居中

1 行内元素水平居中

2 inline-block 元素水平居中

3 块状元素水平居中

二 垂直居中

1 行内元素,inline-block元素水平居中

2 块状元素垂直居中

 一 水平居中

1 行内元素水平居中

a) text-align:center;

适用:文字

2 inline-block元素

a) text-align: center

适用于button, input, select等inline-block元素。

3 块状元素水平居中

a) margin-left: auto; margin-right: auto; 设定宽高。

二 垂直居中

1 行内,inline-block元素垂直居中

a) height, line-height法

设置块状元素的height, line-height相同,里面的行内,inline-block元素就会垂直居中。

原理:我理解的是段落展示的时候,设置的line-height文字会在font-size的基础上上下留出相同的距离((line-height)-(font-size)/2),这样才能达到美观的效果,保证每行间隙一致。

2 块状元素垂直居中

原文地址:https://www.cnblogs.com/zzu-han/p/3164469.html