CSS水平垂直居中方式
2021-01-23 12:15
标签：color isp lex cal osi vertica line center fat 1.grid布局实现（一） .father{ display:grid; align-item:center; justify-items:center; } 2.grid布局实现（二） .father{ display:grid; align-item:center; justify-content:center; } 3.grid配合margin实现 .father{ display:grid; } .son{ margin:auto; } 4.flex布局实现 .father{ display:flex; justify-content:center; align-items:center; } 5.flex配合margin实现 .father{ display:flex; } .son{ margin:auto; } 6.使用display:table-cell实现 .father{ display:table-cell; vertical-align:middle; text-align:center; } .son{ display:inline-block; } 7.使用绝对定位实现 .father{ position:relative; } .son{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} 8.通过内联元素的特性实现 .father{ text-align:center; } .father::after{ content:‘‘; line-height:200px; } .son{ display:inline-block; } line-height与father元素height一样 ————学习记录 CSS水平垂直居中方式 标签：color isp lex cal osi vertica line center fat 原文地址：https://www.cnblogs.com/atao24/p/13278476.html