本文介绍了两种CSS布局实现元素居中的方法。一种是利用绝对定位和transform属性，通过设置父元素相对定位和子元素绝对定位，再调整子元素的transform实现水平垂直居中。另一种是使用Flexbox布局，只需将父元素设为弹性盒子，并设置justify-content和align-items为center，即可轻松实现子元素的居中对齐。这两种方法在网页布局中非常实用。
1.用子绝父相，设置父盒子position:relative 子元素position：absolute，在子元素样式中，直接写top：50%，left：50%，这是发现并没有居中，因为是根据边框来移动的，而不是中心点，此时直接拉回该元素自身宽度的一半，transform：translate（-50%，-50%） ， 这样就可以不知道具体宽高就让元素水平垂直居中了。
2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简洁
扫一扫
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
