CSS水平垂直居中的几种实现方式

水平垂直居中

1.利用 `position:absolute`
2. 利用`margin:auto`
3. 利用弹性盒子
4. 利用水平对齐和行高
5. 最简便的方法

1.利用 `position:absolute`

<div class="father"><div class="son"></div>
</div>

当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半

<style>.father{position: relative;background-color: pink;width: 200px;height: 200px;}.son{position: absolute;background-color: red;width:50px;height: 50px;left: 50%;top: 50%;margin-top: -25px;margin-left: -25px;}
</style>

当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)

.father{position: relative;background-color: pink;width: 200px;height: 200px;}.son{position: absolute;width: 50px;height: 50px;background-color: red;left: 50%;top: 50%;transform: translate(-50%,-50%);}

2. 利用`margin:auto`

.father{position: relative;background-color: pink;width: 200px;height: 200px;}.son{position: absolute;background-color: red;width: 50px;height: 50px;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

3. 利用弹性盒子

通过给父元素设置display:flex来实现居中

.father{display: flex;justify-content: center; //主轴align-items: center; //侧轴background-color: pink;width: 200px;height: 200px;}.son{background-color: red;width: 50px;height: 50px;}

4. 利用水平对齐和行高

设置text-align:center和line-height:height实现单行文本水平垂直居中

<div class="father"><div class="son">我要居中</div>
</div>

 .father{background-color: pink;width: 200px;height: 200px;text-align: center;}.son{line-height: 200px;}

5. 最简便的方法

flex+auto
父元素设置flex 子元素margin：auto；

<style>.g-container{display: flex;width: 300px;height: 300px;background-color:aqua;}.g-box{margin: auto;width: 100px;height: 100px;background-color: black;}
</style>
<body><div class="g-container"><div class="g-box"></div></div>
</body>

CSS水平垂直居中的几种实现方式相关推荐

html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
css 水平垂直居中的几种常见方式
下面是几种常见的水平垂直居中方式,可在不同情形下方便采用不同的方式 html <body><div class="box"><div class=&q ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS | 水平垂直居中都有哪几种方式
我把一个子元素在父元素中水平垂直居中的实现方式分为三类,第一类是宽度已知,第二类是宽度未知,第三类是图片水平垂直居中. 第一类宽度已知第一种方式:采用绝对定位原理元素开启绝对定位后,水平方向和 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...

CSS水平垂直居中的几种实现方式

水平垂直居中

1.利用 `position:absolute`

2. 利用`margin:auto`

3. 利用弹性盒子

4. 利用水平对齐和行高

5. 最简便的方法

CSS水平垂直居中的几种实现方式相关推荐

最新文章

热门文章

CSS水平垂直居中的几种实现方式

水平垂直居中

1.利用 position:absolute

2. 利用margin:auto

3. 利用弹性盒子

4. 利用水平对齐和行高

5. 最简便的方法

CSS水平垂直居中的几种实现方式相关推荐

最新文章

热门文章

1.利用 `position:absolute`

2. 利用`margin:auto`