目录 水平居中 行内元素 块级元素 方案一：(分宽度定不定两种情况) 方案二：使用定位属性 方案三：使用flexbox布局实现（宽度定不定都可以） 垂直居中 单行的行内元素 多行的行内元素 块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一：使用定位属性 方案二：使用flex ...
分类：
Web程序 时间：
2020-07-05 23:12:37
阅读次数：
99
目录盒模型如何实现一个最大的正方形一行水平居中，多行居左水平垂直居中如何实现左右等高布局画三角形link @import导入cssBFC理解 回到顶部盒模型 复制/* 红色区域的大小是多少？200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: ...
分类：
Web程序 时间：
2020-07-02 16:50:41
阅读次数：
84
当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card-image-container{ width: 40%; height: 90%; align-i ...
分类：
微信 时间：
2020-06-30 10:35:20
阅读次数：
123
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
分类：
其他好文 时间：
2020-06-20 16:16:38
阅读次数：
54
平时写CSS样式不注意总结，用的时候写是会写但具体应用场景和组合方式一不小心就混淆，导致效率不高，还要借助文档，本文针对CSS常用样式水平垂直居中解决方案进行总结，也便于自己以后复习，好记性不如烂笔头。针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。 首先通过一个思维导图更 ...
分类：
Web程序 时间：
2020-06-20 00:47:40
阅读次数：
87
网上摘录常用css片段 垂直水平居中 /*绝对定位 ＋ 未知宽高 ＋ translate*/ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*flex 轻松搞定水平垂直居中(未知宽高*/ dis ...
分类：
Web程序 时间：
2020-06-14 23:22:57
阅读次数：
85
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .container { text-align: center; height: 300px; border: 1px solid rebec ...
分类：
其他好文 时间：
2020-06-10 21:15:57
阅读次数：
57
css 如何水平垂直居中，请尽量多说几种方法？很尴尬，我多次面试都被问到这个问题，fuck 定位（回答了）、table-cell布局、flex布局、translate+relative定位 w3c和ie盒模型区别 我回答反了 尴尬 jquery jquery中如何只实现一次事件绑定 $('dom') ...
分类：
其他好文 时间：
2020-06-04 21:49:39
阅读次数：
135
css 水平垂直居中实现方式 css中有好多实现居中的方式，在项目中经常不知道使用哪种方式会比较好，所以记录下来。 水平垂直居中包括行内元素居中，以及块级元素居中 行内元素html结构 <div class="outer"> <span class="inner"></span> </div> 块级 ...
分类：
Web程序 时间：
2020-06-04 19:37:56
阅读次数：
75
垂直居中方法 适用于父盒子为块级元素（div）、子盒子为块级元素（div）；父盒子为块级元素（div）、子盒子为行内块元素（span）；父盒子为块级元素（div）、子盒子为内联元素（img）； .father { height: 500px; width: 500px; background-col ...
分类：
其他好文 时间：
2020-05-26 20:42:24
阅读次数：
66
