div垂直居中对齐方法怎么设置

在制作网页时我们经常会需要将一些模块div用css进行垂直居中,那么div垂直居中应该怎么设置css呢,今天就给各位分享

div垂直居中对齐方法怎么设置

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宽度一半的负值

div{
width:600px;
height: 600px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}

方法三:

绝对定位方法:绝对定位下top left right bottom 都设置0,给div设置一个class名字为child

<div class="child">我是子级</div>
div.child{ 
width: 600px; 
height: 600px; 
background: red; 
position:absolute; 
left:0; top: 0; 
bottom: 0; 
right: 0; 
margin: auto;
}

给TA打赏
共{{data.count}}人
人已打赏
网站知识

html如何设置文字超出显示省略号

2023-11-22 13:27:23

网站知识

table样式css美化属性怎么设置

2023-11-26 9:56:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧