前端面试CSS系列——DIV垂直水平居中
<h3 style="color: black; text-align: left; margin-bottom: 10px;">怎么让一个div 垂直水平居中</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">代码片段</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">// HTML
<div class="parent">
<div class="child"></div>
</div></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
position:relative;
}
// <span style="color: black;">第1</span>种
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
// 第二种（<span style="color: black;">必须</span>固定宽高）
.child{
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
// 第三种（<span style="color: black;">必须</span>固定宽高）
.child{
position:absolute;
width:100px;
height:100px;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
// 第四中（固定宽高 + transform变形）
.child{
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
bac<span style="color: black;">公斤</span>round: yellow;
transform: translate(-50px, -50px);
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">flex布局</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
width: 500px;
height: 500px;
bac<span style="color: black;">公斤</span>round: pink;
display: flex;
align-items: center;
justify-content: center;
}
// 子元素<span style="color: black;">能够</span>固定宽高
.parent. child {
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: yellow;
}
// 子元素不设置宽高
.parent. child {
bac<span style="color: black;">公斤</span>round: yellow;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">table-cell</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
width: 500px;
height: 500px;
display: table-cell;
text-align: center;
vertical-align: middle;
bac<span style="color: black;">公斤</span>round: pink;
}
.parent .child {
display: inline-table;
/*
// 这种写法<span style="color: black;">亦</span><span style="color: black;">能够</span>
display: inline-block;
display: inline; */
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: yellow;
}</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">Grid</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
width: 500px;
height: 500px;
display: grid;
bac<span style="color: black;">公斤</span>round: pink;
}
.parent .child {
align-self: center;
justify-self: center;
width: 100px;
height: 100px;
bac<span style="color: black;">公斤</span>round: yellow;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">Demo</a></p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">总结</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">让一个div垂直水平居中有两种<span style="color: black;">状况</span>，<span style="color: black;">第1</span>种是元素不固定宽高的，有三种方式</p><span style="color: black;">运用</span>绝对定位加transform偏移<span style="color: black;">运用</span>flex布局，设置align-items:center;justify-content:center;<span style="color: black;">运用</span>grid布局，设置align-self:center; justify-self:center;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>元素有固定宽高，<span style="color: black;">能够</span><span style="color: black;">运用</span>：</p>绝对定位+transform偏移绝对定位+负margin值绝对定位+margin:auto不固定宽高的三种方式<h3 style="color: black; text-align: left; margin-bottom: 10px;">参考</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">前端进阶</a></p>
外链发布社区 http://www.fok120.com/ 论坛外链网http://www.fok120.com/ 你说得对，我们一起加油，未来可期。
页:
[1]