正文
CSS布局总结（三）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前言：今天学的有点少，主要是有点迷.... 这是昨天没写的
一、水平居中
.parent{
text-aglin:center;
}
.child{
display:inline-block;
}
.parent{
display:table;
margin:0 auto;
}
.parent{
text-aglin:center;
}
.child{
display:inline-block;
}
.parent{
display:table;
margin:0 auto;
}
在知道元素的宽度的情况下
.child{
width:500px;
position:absolute;
left:50%;
margin-left:-250px;
}
在 不 知道元素的宽度的情况下
.child{
position:absolute;
top:50%;
left:50%
transform:translateX(-50%);
}
二、垂直居中
.parent{
display:table-cell;
vertical-aglin:middle;
}
.child{
position:absolute;
top:50%;
transform:transitionY(-50%);
}
.parent{
display:flex;
aglin-items:center;
}
二、水平垂直居中
.parent{
display:table-cell;
vertical-aglin:middle;
}
.child{
position:absolute;
top:50%;
transform:transitionY(-50%);
}
.parent{
display:flex;
aglin-items:center;
}
第一种：
.parent{
display:table-cell;
vertical-aglin:middle;
text-aglin:center;
}
.child{
display:inline-block;
}
第二种：
.child{
position:absolute;
top:50%;
left:50%
transform:translate(-50%,-50%)
}
第三种：
html,body{
height: 100%;
}
.parent{
position: relative;
height: 100%;
}
.child{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute;
left:;
top:;
right:;
bottom:;
background-color: red;
}
第四种：
.parent{
display:flex;
aglin-items:center;
justify-content:center;
}
