有很多种方法,我给你列举几个实际情况中经常用的
对于具有inline属性的元素,可以设置行高与高相同,text-align设置为center即可
对于块级元素
①父元素为相对定位,想让绝对定位的元素水平垂直居中,可设置top left两个属性的值为50%,然后通过transform属性的translate(-50%, -50%)来达到水平垂直居中的效果
②对于没有相对于父级定位的元素,可以在设置margin:auto达到水平居中的前提下,给该元素这只相对定位,把top的值设为50%,再利用transform的translateY(-50%)同样也能达到视觉上的水平垂直居中效果
整体上有很多种方法达到水平垂直居中的效果,无外乎就是通过内外边距,定位,行高加文本居中的方式,前端的目的不是让元素确确实实居中了,而是用最优的方法在视觉效果上居中。
1.横向居中
(1)方法一
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
(2)方法二
设置固定宽度,并且设置margin:auto
(3)方法三
left: 50% - 居中盒子宽度的50%;
2.纵向居中
(1) 高度和行高设置一样
height: 100px;
line-height:100px;
3.横向和纵向都居中
/* 默认的主轴是x轴row, justify-content: center 沿着主轴居中对齐 */
justify-content: center;
/* 我们需要一个侧轴居中 */
align-items: center;
以上就是土嘎嘎小编大虾米为大家整理的css居中的方法_css,里面怎么让一个DIV居中,?相关主题介绍,如果您觉得小编更新的文章对您有所帮助,不要忘记讲本站分享给您身边的朋友哦!!