CSS如何实现水平垂直居中？

　　1、使用Flexbox： 通过设置容器为display: flex;并使用justify-content: center;和align-items: center;可以轻松实现子元素的水平垂直居中。

　　2、使用Grid布局： 将容器设为display: grid;并使用place-items: center;也可以实现内容的水平垂直居中。

　　3、使用绝对定位和负边距： 对子元素设置position: absolute;，然后调整top: 50%;，left: 50%;和使用transform: translate(-50%, -50%);可以实现居中。

　　4、使用绝对定位和margin:auto： 将子元素绝对定位，设置top, right, bottom, left为0，并margin: auto;，也能实现居中。

　　5、使用表格布局： 通过将父元素设置为display: table;，子元素设置为display: table-cell;并使用vertical-align: middle;和text-align: center;可以实现居中。

很赞哦！

python编程网提示：转载请注明来源www.python66.com。
有宝贵意见可添加站长微信(底部)，获取技术资料请到公众号(底部)。同行交流请加群