0
点赞
收藏
分享

微信扫一扫

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】


🚀作者简介

​主页:水香木鱼的博客

专栏:CSS3

能量:🔋容量已消耗1%,自动充电中…

笺言:用博客记录每一次成长,书写五彩人生。

📒技术聊斋

(一)水平居中

1、text-align: center

<div class="wrapper wrapper1">
<span>行内,text-align: center;</span>
</div>

.wrapper1 {
text-align: center;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高

2、margin: 0 auto;

<div class="wrapper wrapper2">
<div>
块元素
<p>(定宽度)</p>
<p>margin: 0 auto</p>
</div>
</div>

.wrapper2 div {
width: 100px;
margin: 0 auto;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_css_02

3、 text-align: center + display: inline;【无宽高时使用】

<div class="wrapper wrapper3">
<div>块元素(不定宽度)</div>
</div>

.wrapper3 {
text-align: center;
}
.wrapper3 div {
display: inline;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高_03

4、justify-content: center【flex实现】

<div class="wrapper wrapper4">
<div>
块元素
<p>flex实现</p>
<p>(定不定宽度可以)</p>
</div>
</div>

.wrapper4 {
display: flex;
justify-content: center;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高_04

(二)垂直居中

1、line-height【行高实现】

<div class="wrapper wrapper5">
<span>单行的行内元素,设置行高</span>
</div>

.wrapper5 {
line-height: 150px;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_css_05

2、display: table-cell; vertical-align: middle;

<div class="wrapper wrapper6">
<span>多行的行内元素,多行的行内元素,
多行的行内元素,多行的行内元素,
多行的行内元素,多行的行内元素
</span>
</div>

.wrapper6 {
display: table-cell;
vertical-align: middle;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_css3_06

3、 position: absolute; top: 50%; margin-top: -50px;【定位实现】

<div class="wrapper wrapper7">
<div>块级元素(定高度)</div>
</div>

.wrapper7 {
position: relative;
}
.wrapper7 div {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_css_07

4、align-items: center;【flex实现】

<div class="wrapper wrapper8">
<div>
块级元素
<p>flex实现</p>
<p>(定不定高度可以)</p>
</div>
</div>

.wrapper8 {
display: flex;
align-items: center;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_css_08

(三)水平垂直居中

1、已知宽高【定位+margin:auto】

<div class="wrapper wrapper9">
<div>
块级元素
<p>已知宽高</p>
</div>
</div>

.wrapper9 {
position: relative;
}
.wrapper9 div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高_09

2、已知宽高【定位+外边距】

<div class="wrapper wrapper10">
<div>
块级元素
<p>已知宽高</p>
</div>
</div>

.wrapper10 {
position: relative;
}
.wrapper10 div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高_10

3、未知宽高【定位+transform】

<div class="wrapper wrapper11">
<div>
块级元素
<p>未知宽高</p>
</div>
</div>

.wrapper11 {
position: relative;
}
.wrapper11 div {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_前端_11

4、未知宽高【flex实现】

<div class="wrapper wrapper12">
<div>
块级元素
<p>flex实现</p>
<p>未知宽高</p>
</div>
</div>

.wrapper12 {
display: flex;
justify-content: center;
align-items: center;
}

效果:

前端css实现水平居中、垂直居中、水平垂直居中【木鱼精简】_宽高_12

木鱼谢语:感谢各位技术大牛们的点赞👍收藏🌟,每一期都会为大家带来快速适用于业务的文章,让大家做到cv即可。


举报

相关推荐

0 条评论