居中对于前端开发人员来说属于常见操作了,但是你能对每一个元素素做到迅速准确的居中吗?博主在这里整理了一些常见的元素水平居中方式,分享给大家如果有整理不到位的欢迎大家指正!

一、行内元素居中

行内元素居中我们通常通过给元素的父元素赋tex-align来实现,属于最常见的居中操作了,在下边提供了代码大家可以运行显示效果。
这种我们一般用来调整段落字符或者图片(HTML里图片常规相当于一个字符)。




行内元素还有就是通过设置margin属性来实现水平居中操作,也属于比较常用。但是这个有一个缺点就是你的父元素width不能等于100%




第三种就是将行内元素置于table里边然后设置table的行内文字格式或者边距,由于代码高度重复,展示没有任何实际意义,所以本处不再提供详细代码运行展示.

二、块级元素

对于文本形式的可以转换为行内元素,比如通过ul元素的li元素



第二种就是子元素相对于父元素定位,可以用left或者margin来完成定位,但这里需要注意的就是position在EDGE不能友好的执行,



还有一种方法就是用HTNL的center标签包含这样里边所有元素都可以居中,但是在HTML4.1后边的规范中不建议用center标签,但是所有浏览器均支持这个标签