10
水平垂直居中
source link: http://muyunyun.cn/blog/468zxcwa/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
flex + margin: auto
父节点使用 display: flex, 子节点使用 margin: auto
<style>
.flex {
display: flex;
width: 300px;
height: 300px;
background: #ccc;
margin-bottom: 5px;
.flex p {
margin: auto;
</style>
<div class="flex">
<p>content</p>
</div>
flex 结合 justify-content、align-items
<style>
.flex2 {
display: flex;
width: 300px;
height: 300px;
background: #ccc;
align-items: center;
justify-content: center;
margin-bottom: 5px;
</style>
<div class="flex2">
<p>content</p>
</div>
绝对定位 + 相对定位
<style>
.position {
position: relative;
width: 300px;
height: 300px;
background: #ccc;
.position p {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
</style>
<div class="position">
<p>content</p>
</div>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK