CSS系列之你能实现多少种水平垂直居中的布局
2024-04-15 06:13:34
文章の目录
- 1、定宽高
- 1.1、绝对定位和负 margin 值
- 1.2、绝对定位 + transform
- 1.3、绝对定位 + left/right/top/bottom + margin
- 1.4、flex 布局
- 1.5、grid 布局
- 1.6、table-cell + vertical-align + inline-block/margin: auto
- 1.7、绝对定位 + calc
- 2、不定宽高
- 2.1、绝对定位 + transform
- 2.2、table-cell
- 2.3、flex 布局
- 2.4、flex 变异布局
- 2.5、grid + flex 布局
- 2.6、grid + margin 布局
- 2.7、writting-mode 属性布局
- 写在最后
我们在日常的开发中，经常会遇到这样一个问题，就是如何实现水平垂直居中对齐。并且在面试中也会出现这样的问题，但是我们往往回答的不是很全部，而导致没有得到面试加分。接下来我们通过不同的方式来实现。
1、定宽高
1.1、绝对定位和负 margin 值
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);position: relative;
}.children {width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;
}
1.2、绝对定位 + transform
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);position: relative;
}.children {width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
1.3、绝对定位 + left/right/top/bottom + margin
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);position: relative;
}.children {width: 100px;height: 100px;background-color: red;position: absolute;display: inline;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
1.4、flex 布局
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: flex;justify-content: center;align-items: center;
}.children {width: 100px;height: 100px;background-color: red;
}
1.5、grid 布局
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: grid;
}.children {width: 100px;height: 100px;background-color: red;margin: auto;
}
1.6、table-cell + vertical-align + inline-block/margin: auto
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: table-cell;text-align: center;vertical-align: middle;
}.children {width: 100px;height: 100px;background-color: red;/* 下方这两个用哪个都可以 */margin: auto;/* display: inline-block;s */
}
1.7、绝对定位 + calc
<div class="parent"><div class="children"></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);position: relative;
}.children {width: 100px;height: 100px;background-color: red;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);
}
2、不定宽高
2.1、绝对定位 + transform
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);position: relative;
}.children {background-color: red;color: white;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
2.2、table-cell
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: table-cell;text-align: center;vertical-align: middle;
}.children {background-color: red;color: white;display: inline-block;
}
2.3、flex 布局
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: flex;justify-content: center;align-items: center;
}.children {background-color: red;color: white;
}
2.4、flex 变异布局
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: flex;
}.children {background-color: red;color: white;margin: auto;
}
2.5、grid + flex 布局
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: grid;
}.children {background-color: red;color: white;align-self: center;justify-self: center;
}
2.6、grid + margin 布局
<div class="parent"><div class="children">楠♥竹</div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);display: grid;
}.children {background-color: red;color: white;margin: auto;
}
2.7、writting-mode 属性布局
<div class="parent"><div class="children"><p>楠♥竹</p></div></div>
.parent {width: 300px;height: 300px;border: 1px solid rgb(1, 131, 227);writing-mode: vertical-lr;text-align: center;
}.parent>.children {writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;
}
.parent>.children>p {display: inline-block;margin: auto;text-align: left;background-color: red;color: white;
}
writing-mode 属性定义了文本在水平或垂直方向上如何排布。兼容性上还有些小瑕疵，但大部分浏览器已经支持。
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
CSS系列之你能实现多少种水平垂直居中的布局相关推荐
- 【css】常用的几种水平垂直居中方式与盒子模型，面试经常问到！
div水平垂直居中 假设结构为此,2个div嵌套 <div class="box"><div class="content"></ ...
- [css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;tra ...
- css 几种水平垂直居中的方法 及 弹性盒子
margin :auto 方法 ================== 给 要居中的元素 设置 margin :auto 绝对定位 position :absolute; top:0;bottom:0; ...
- 八十七、CSS水平垂直居中的布局方式
@Author:Runsen 2020/11/30. 周一.今天又是奋斗的一天. 文章目录 水平居中 inline-block+ text-algin 属性配合使用 子元素block和margin属性 ...
- css变成块级元素_css块级元素垂直居中常用布局方式
在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...
- CSS 常用样式 水平居中 水平垂直居中 Container布局
效果图1 效果图1代码 <div class="bg-all"><div class="large-container"></di ...
- 水平垂直居中的几种方式
文章目录 水平垂直居中 一.实现水平垂直居中的方式 二.具体实现 元素定宽高 利用定位 + calc 利用定位 + margin:负值 元素不定宽高 利用定位 + margin:auto 利用定位 + ...
- CSS中让元素水平垂直居中的6种写法
水平垂直居中 水平居中 水平垂直居中--flex布局 margin + position:absolute布局 transform + absolute absolute + margin负值 abs ...
- css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
最新文章
- LabVIEW设计自定义滚动条
- 图像的矩，以及利用矩求图像的重心，方向
- 怎么禁止实例化对象---2016-08-31
- python一般学多久可以考试_为何Python适合初学者 一般Python要学习多久
- ref:下一个项目为什么要用 SLF4J
- 使用ueditor实现多图片上传案例——Dao层（IShoppingDao）
- WPF中如何创建服务
- 求n的阶乘java_Java 求n的阶乘
- ligerui php mysql_ligerui中3级联动的数据库例子
- 新时代、新挑战、新机遇
- Jmeter （三十）jmeter+ant+jenkins持续集成
- 小波变换和motion信号处理（二）
- 反激变换器matlab仿真变压器demo,反激变换器建模Matlab仿真
- 计算机中内存存储器最小单位,计算机中存储容量的最小单位和最基本单位是什么？...
- 心理测试软件沙盘游戏,心理沙盘游戏软件|心理测验管理系统 网络版
- Z逆变换（2020.10.21）
- python最优投资组合_CVXOPT投资组合优化
- 发到微信的apk文件变成apk.1，如何安装，解决办法
- 用iPad开发iPhone App，苹果发布Swift Playgrounds 4
- php加载COM组件失败原因及其解决方法