居中总结

居中：盒子在其包含块里居中

水平居中

行盒（行块盒）水平居中

要想行盒、行块盒水平居中，给他的父元素设置text-align: center;

常规流块盒水平居中

定宽，然后左右margin为auto

绝对定位元素的水平居中

定宽，然后设置left/right为0，再设置左右margin为auto

tips:
先找绝对定位元素的包含块（从内往外看，找到position不为static的祖先元素时，即为找到；若没有，则整个页面为其包含块）

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

垂直居中

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子的上下相同的的padding，达到类似的效果

绝对定位的垂直居中

定高，设置top/bottom为0，将上下margin设置为auto

参考资料

【渡一教育】袁进老师的html+css基础课程
【渡一教育】袁进老师相关课程源代码

CSS进阶（6）- 居中总结相关推荐

CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
CSS实现元素居中原理解析
原文:CSS实现元素居中原理解析在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
(11/24) css进阶：Less文件的打包和分离
(11/24) css进阶:Less文件的打包和分离写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展 ...
前端开发注意事项(HTML与CSS进阶)
HTML 与 CSS 进阶 Img 标签 alt 属性一定要添加用于图片描述给机器看的,如果图片加载失败,会显示 alt <img src="" alt="& ...
php页面底部信息居中,css底部如何局中？css三种居中方法
本篇文章给大家带来的内容是关于css底部如何局中?css三种居中方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 某天组长让我改一个表格的样式,要求底部局中.当时想很简单的嘛,哼哧 ...
html盒子自动居中,css盒子怎么居中？
在前端切图的时候,可能经常会遇到一个div盒子怎么在固定区域垂直居中的需求,下面我们来看一下css实现盒子居中的方法. css设置盒子居中的方法: 第一种: 用css的position属性 .div1 ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
CSS Center（居中专题）
CSS Center(居中专题) 水平居中(左右居中) // 1.inline-block + text-align.parent{text-align: center;}.child{display ...

CSS进阶（6）- 居中总结

文章目录