水平居中在网页前端设置是最常见的
最常见的方法
1.对于固定宽度的父标签可用margin 或 padding调整距离 使之居中
这种方法使用时有条件的,开发应用偶尔能用得上,但是对于父标签宽度不固定的 就无法使用该方法,例如父标签是<body>
2.margin:0 auto 或者 margin-left:auto;margin-right:auto;
这个方法解决了上面的局限,在开发中经常使用该方法水平居中,需要注意加文档<!DOCTYPE>声明才生效
3.text-align:center 属性规定元素中的文本的水平对齐方式
注意 :第一点:是指标签内容水平居中 第二点 标签是行内元素该属性text-align才生效,有时候为了达到条件 会配合使用diplay:inline-block使用
标签table下的td经常使用该属性
4.background-position:center 只有在图片水平居中的情况下 可以考虑该方法
5.定位居中 本博客在css垂直居中文章介绍了该方法
还有很多其他方法可以实现水平居中但是需要注意属性兼容性问题 ,
上面介绍的属性都是兼容任何一个浏览器,注意他们的使用条件
在开发中灵活使用这5种方法足够解决水平居中的问题,css最难的是垂直居中