【HTML-CSS】CSS实现垂直和水平居中

时间：2023-03-30 14:29:49 CSS

相信在工作中，我们经常会遇到对某个元素进行垂直和水平居中的需求。下面总结一下元素已知宽度绝对定位+边距反向偏移的实现方法htmlSumon测试

元素未知宽度绝对定位+边距自动+流体属性html

召唤测试

提示当定位元素同时具有特定的定位值及其相反的定位方向属性时，就会出现流体特性margin:auto对于具有fluid属性的绝对定位元素的填充规则和普通fluid元素是完全一样的：1.如果一侧固定，则一侧为auto，auto为剩余空间的大小；2.如果两边都是auto，剩余的空间平分；绝对定位+变换反向偏移html

Sumon测试

flexlayouthtml

Tips1.justify-contentPosition2.align-items垂直元素位置table-celllocationhtml

Sumon测试

Tips1.vertical-align设置元素2.text-align设置元素中文本的水平对齐方式以上以上就是我对CSS实现垂直和水平居中的总结，如有异议欢迎留言

上一篇：【刘健】前端面试题总结

下一篇：css让div

【HTML-CSS】CSS实现垂直和水平居中相关文章