3种水平垂直的方式

素颜马尾好姑娘i 2023-08-17 16:42 5阅读 0赞

## 1 绝对定位 + 转换 ##

<div class="parent"> <div class="child">绝对定位 + 转换</div> </div>

.parent { position: relative; width: 400px; height: 400px; background: skyblue; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background: pink; }

![1649737-20190723001221285-1759258288.png][]

## 2 弹性模型 ##

<div class="parent"> <div class="child">弹性模型</div> </div>

.parent { display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; background: skyblue; } .child { width: 200px; height: 200px; background: pink; }

![1649737-20190723001246936-1517156677.png][]

## 3 单元格方式 ##

<div class="parent"> <div class="child">单元格方式</div> </div>

.parent { display: table-cell; text-align: center; vertical-align: middle; width: 400px; height: 400px; background: skyblue; } .child { display: inline-block; width: 200px; height: 200px; background: pink; }

![1649737-20190723001301257-1771343336.png][]

转载于:https://www.cnblogs.com/0x29a/p/11229348.html

[1649737-20190723001221285-1759258288.png]: /images/20230809/7b3078f480d44208b3f229fe6f671f14.png
[1649737-20190723001246936-1517156677.png]: /images/20230809/aaf2082a90774b479e72d2678e648c64.png
[1649737-20190723001301257-1771343336.png]: /images/20230809/ce31decb7c464e87ac9896fb06b73ed0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 3种水平垂直的方式

1 绝对定位 + 转换 <div class="parent"> <div class="child">绝对定位 + 转换</div> </div> .

素颜马尾好姑娘i/ 2023年08月17日 16:42/ 0 赞/ 6 阅读

相关 css 水平垂直居中的三种方式

绝对定位 + transform /示例/ position:absolute; left:50%; top:50%; tra

墨蓝/ 2023年07月07日 12:53/ 0 赞/ 8 阅读

相关 CSS水平垂直居中的三种方式。

文字在盒子中：`text-align:center; line-height:height;` 子盒子在父盒子中： ①在父盒子中使用flex布局：

我会带着你远行/ 2023年02月28日 05:28/ 0 赞/ 2 阅读

相关 css实现水平垂直居中常用的几种方式

1、绝对定位：父元素： position: relative; 子元素： position: absolute; left: 50%;

逃离我推掉我的手/ 2022年11月26日 08:51/ 0 赞/ 153 阅读

相关 html%3cp%3e垂直居中,实用的15种html/css/css3居中方式实现水平居中垂直居中水平垂直居中...

做为前端工程师，在作页面布局的时候，毫无疑问会涉及到居中布局的困扰，同时也是基本能力之一。今天就用一篇文章来总结&&解决这个问题，及其适合新手去学习作HTML5/CSS3的页面

素颜马尾好姑娘i/ 2022年10月10日 06:23/ 0 赞/ 140 阅读

相关 CSS 实现元素水平垂直居中的 N 种方式

点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料 ![ba40f0ea9cf747c0909f83922c3

╰+哭是因爲堅強的太久メ/ 2022年09月04日 03:59/ 0 赞/ 93 阅读

相关 CSS垂直水平居中方式大全(二)----水平垂直居中

1.利用绝对定位+transform(不固定宽高水平垂直居中) 示例: <!DOCTYPE html> <html> <head>

ゞ浴缸里的玫瑰/ 2022年06月04日 02:09/ 0 赞/ 435 阅读

相关 CSS垂直水平居中方式大全(一)----水平居中-垂直居中

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。一、水平居中

冷不防/ 2022年06月04日 01:53/ 0 赞/ 454 阅读

相关水平垂直居中布局的多种实现方式

下面为公共代码： <div class="box"> <div class="small">small</div> </div> .

分手后的思念是犯贱/ 2022年04月06日 03:11/ 0 赞/ 186 阅读

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

固定宽高 1.position+margin-top+margin-left .box-container{ position: relati

一时失言乱红尘/ 2021年09月02日 06:29/ 0 赞/ 366 阅读