H5 水平居中 水平垂直居中 |
您所在的位置:网站首页 › 上下左右居中怎么设置css › H5 水平居中 水平垂直居中 |
Tips:元素一般分为 块级元素 和 行内元素
块级元素可以设置高度,宽度,行内元素则不能,如果将行内元素变成行内块元素就可以设置宽高了,只需要将 display 属性设置为 inline-block 即可; 一、 水平居中 1.行内元素水平居中:给行内元素的父级元素设置 text-align: center ; 水平居中 2.块级元素水平居中:确保块级元素有一个宽度,给行内元素设置 display: block ; 属性,再给该元素设置 margin: 0 auto ; 水平居中 水平居中 3.相对与绝对定位水平居中:确保父级元素具有相对定位属性 relative , 需要居中的子级元素具有绝对定位属性 absolute 。再给子级元素设置 left: 50% ; transform: translateX(-50%) ; 水平居中 水平居中 4.使用 calc() 函数:看懂第3点方法,这第4点方法显得有些鸡肋了。这是在css3以前常见的方式。缺点很容易看出,宽度和减去的常量不能很好的动态变化; 水平居中 水平居中 二、水平垂直居中 能够理解上述水平居中,那么水平垂直居中就很容易理解,需要注意的就是如何垂直。 1.块级元素水平垂直居中:给元素的父级元素设置具体高度 line-height 等于 height 高度 水平垂直居中 2.相对与绝对定位水平垂直居中:再给子级元素设置 left: 50% ; top: 50% ; transform: translate(-50%,-50%) ; 水平垂直居中 3. 固定定位中 left: 0 ; top: 0 ; right: 0 ; bottom: 0 : 确保元素有一固定宽高,再给元素设置一个 margin: auto ; 水平垂直居中 4. flex 布局:最常见的一种布局方式,属性自由多变。给元素设置 display: flex ; align-items: center; justify-content: center ; 水平垂直居中常见,常用的水平居中,水平垂直居中的方法都在这了。当然还有很多其它的方法,感兴趣话可以去研究研究。 有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |