迅闻网
让更多人看到你

div垂直居中的方法(div垂直居中显示三种方式)

div垂直居中的方法

首先咱们应该知道文字的水平居中比较简单,行级元素设置其父元素的text-aligncenter,块级元素设置其本身的left和rightmargins为auto即可。可是div文字的笔直居中就不是那么简单了,所以咱们就来详细看看div文字笔直居中的几种完成方法。
1、vertical-align特点让文字居中
vertical-align值有很多,常用的就是middle,bottom,text-bottom等,然而实在使用的时分,咱们会发现这个特点“时灵时不灵”,有些情况下咱们加了这个特点之后依然不见img或许text有任何的改变。那是因为vertical-align只作用在inline-block或许inline,还有table-cell等元素内。
示例:
文本居中
2、使用行高(line-height)让文字笔直居中
如果要笔直居中的只要一行或几个文字,那它的制造最为简单,只要让文字的行高和容器的高度相同即可。
示例:
p{height:30px;line-height:30px;width:100px;overflow:hidden;}
3、使用内边距(padding)让文字笔直居中
使用内边距让文字笔直居中和使用行高让文字笔直居中差不多,相同适合一行或几行文字笔直居中。
示例:
p{padding:20px0;}
4、使用CSS3的transform来完成文字笔直居中
示例:
.center-vertical{
position:relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position:relative;
left:50%;
transform:translateX(-50%);
}
5、使用flex布局完成文字笔直居中
示例:
.flex{/*flex布局*/
display:flex;/*完成笔直居中*/
align-items:center;/*完成水平居中*/
justify-content:center;
text-align:justify;
width:200px;
height:200px;
background:#000;
margin:0auto;
color:#fff;div

div垂直居中显示三种方式

方法一:transform:translate(-50%,-50%)
示例代码如下:
.div{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:red;
}
主要使用css3的:transform:translate(-50%,-50%)
长处:灵敏,无需知道该div的高宽。
缺点:是CSS3新特性,所以兼容性会有问题。不兼容ie8-(有必要带上浏览器厂商的前缀才能兼容到ie9+)
方法二:margin-left和margin-top设为其高宽的一半的负值
示例代码如下:
div{width:600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;/*高度的一半*/margin-left:-300px;/*宽度的一半*/}
长处:根本无任何兼容性问题
缺点:有一个很明显的不足,便是需求提早知道元素的尺度。否则margin负值的调整无法准确。此时,往往要借助JS获得。
方法三:margin:auto完成绝对定位元素的居中
示例代码如下:
.div{width:600px;height:400px;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;/*有了这个就主动居中了*/}
代码两个关键点:
上下左右均0方位定位;
margin:auto
上面代码的width:600pxheight:400px仅是暗示,你修改为其他尺度,或许不设置尺度(需求是图片这种本身包括尺度的元素),都是居中显现的。
宽高假如任意一个没有设置,则默许便是100%,即:“上下左右多个等于0”的成果,
假如不设置父级,则默许是相对于body居中,即居中显现于整个页面;
长处:①根本无任何兼容性问题,
②像图片这种本身包括尺度的元素,可以不设置高宽吧?(待确认)
缺点:①大多数时分依然需求知道高宽,当元素高度或许改变的时分,就会比较麻烦,
②父级也需求有明确的高宽,才能相对父级居中定位,

未经允许不得转载:迅闻网 » div垂直居中的方法(div垂直居中显示三种方式)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页