div垂直居中代码示例如下:
前台效果如下图所示:
如图所示,div中的文字垂直居中。其中主要的属性就是line-height。
line-height属性设置行间的间隔(行高即垂直方向)。
line-height属性会影响行框的规划。在应用到一个块级元素时,它定义了该元素中基线之间的最小间隔而不是最大间隔。
line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。能够包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。

div

假如我们这里将设置的高度height:500px,改为200px,那么呈现效果如下:
假如我们这里不设置高度height但是设置line-height:200px;,效果就如下所示:
此时我们能够丈量发现红色背景的div的高度为400px。
line-height和height区别:
简单得说,line-height是行高的意义,height则是定义元素本身的高度。
综上所述,当我们想要完成div内容垂直居中效果,需求使line-height和height值坚持分歧。

cssdiv水平垂直居中六种方法

在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。
方法一:
绝对定位方法:不确定当前div的宽度和高度,采用transform:translate(-50%,-50%);当前div的父级添加相对定位(position:relative;)
图片展示:
代码如下:
div{
background:red;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
方法二:
绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值
图片展示:如方法一的图片展示

div1

代码如下:
div{
width:600px;
height:600px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}
方法三:
绝对定位方法:绝对定位下topleftrightbottom都设置0
图片展示:如方法一的图片展示
代码如下:
<!–html–>
<divclass=”child”>我是子级</div>
/**css**/
div.child{
width:600px;
height:600px;
background:red;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
方法四:
flex布局方法:当前div的父级添加flexcss样式
展示图如下:
代码如下:
<!–html–>
<divclass=”box”>
<divclass=”child”>child</div>
</div>
/**css**/
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1pxsolid#ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}
方法五:
table-cell实现水平垂直居中:table-cellmiddlecenter组合使用
展示图如下:
代码如下:
<!–html–>
<divclass=”table-cell”>
<p>我爱你</p>
</div>
1
/**css**/
.table-cell{
display:table-cell;
vertical-align:middle;
text-align:center;
width:240px;
height:180px;
border:1pxsolid#666;
}
方法六:
绝对定位:calc()函数动态计算实现水平垂直居中
展示图如下:
<!–html–>
<divclass=”calc”>
<divclass=”child”>calc</div>
</div>
/**css**/
.calc{
position:relative;<br>border:1pxsolid#ccc;<br>width:400px;<br>height:160px;
}
.calc.child{
position:absolute;<br>width:200px;<br>height:50px;
left:-webkit-calc((400px-200px)/2);
top:-webkit-calc((160px-50px)/2);
left:-moz-calc((400px-200px)/2);
top:-moz-calc((160px-50px)/2);
left:calc((400px-200px)/2);
top:calc((160px-50px)/2);
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注