水平居中的实现方式-六种

原创 ydsjiang 随笔 Web前端 583阅读 2017-12-06 22:37:13 举报

方法一:设置固定宽度,在margin:0 auto;
<div id="app">水平居中</div>

app{

width: 900px;
margin: 0 auto;
background: yellow;

}
方法二:绝对定位
<div id="app">水平居中</div>

app{

width: 500px;
position: absolute;
left:50%;
margin: 0 -250px;
background: yellow;

}
方法三:父类text-align:center,子类inline-block
<div id="app">水平居中</div>
body{
text-align: center;
}

app{

display: inline-block;
background: yellow;

}
方法四:css3的flex
<div id="app">水平居中</div>
body{
display: flex;
justify-content: center;
}

app{

background: yellow;

}
方法五:table
<div id="app">水平居中</div>
body{
display: table;
margin: 0 auto;
}

app{

display: table-cell;
background: yellow;

}
方法六:css3 fit-content
<div id="app">水平居中</div>

app{

width: fit-content;
margin: 0 auto;
background: yellow;

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复