HTML元素如何居中

摘要: HTML元素分为两类：行内元素和块级元素。

HTML元素分为两类：行内元素和块级元素。

可以使用margin:auto，实现水平居中；

行内元素可以使用vertical-align:middle，实现垂直居中；

vertical-align:middle对块级元素无效；

块级元素如果宽高固定，可以通过top属性实现垂直居中：

div{position:absolute;
heigt:Xpx;
top:calc(50%-1/2X);
}
div{position:absolute;
heigt:Xpx;
top:50%;
margin-top:-1/2X;
}

也可以使用position:fixed相对于屏幕定位。

水平居中也可以使用类似代码实现。

如果块级元素是动态大小，可以使用js达到相同效果。

BTW：css文件第一行一定要加上如下代码(不要问我为什么)：

*{margin:0;
padding:0;
}