1. 把margin设置为auto
- 此方法只能进行水平的居中,且对浮动元素或绝对定位无效
- 此方法是将元素的位置相对与父元素进行水平居中
- 适用于对元素进行定位,对元素内部的元素不起作用
2. 使用text-align:center
- 只对行内元素能够进行水平居中,在IE6、7中,可以对任何元素居中
- 是使元素内部的子元素进行水平居中,对该元素无效
3.使用line-height让单行文字垂直居中
- 把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况
- line-height的具体使用参考:https://blog.csdn.net/qq_41539074/article/details/102609598
4. 使用表格
- 表格默认的就会对它里面的内容进行垂直居中
- 具体使用查看https://www.html.cn/archives/6308
5.使用绝对定位来进行居中
- 父元素设置
position: relative;
,子元素设置position:absolute; margin: auto; top:0;bottom: 0; left: 0; right:0;
无需知道被垂直居中的元素的宽和高,单个元素的垂直居中 - 父元素设置
position:relative;
子元素设置poaition:absoulte; top:50%;left:50%;margin-top:-1/2height;margin-left:-1/2width
;` 此方法只适用于已经知道宽度和高度的元素,单个元素的垂直居中
**7.使用line-block结合::after **
- 参考https://www.jianshu.com/p/b45f4d8ca372
8. 使用flex布局
display:flex;justify-conten:center;align-items:center;
可实现单行子元素在父元素中水平垂直居中排列,多个元素
9.行内元素的水平居中
- 把行内元素包裹在块级父层元素中,在父层元素设置
text-align: center;
- felx布局
10.块级元素水平居中
- 将其自身margin设置为
margin: 0 auto;
,实现单个元素的水平居中 - 将子元素设置为
display:inline-block;
,给其父元素设置text-align: center;
可实现多个元素的水平 居中,有副作用,慎用 - 使用flex布局
- position、float、具体使用参考:https://blog.csdn.net/qq_41539074/article/details/95363801
参考资料:https://www.cnblogs.com/2050/p/3392803.html