CSS水平居中与垂直居中的总结

html-css013

CSS水平居中与垂直居中的总结,第1张

1. 设置 margin: 0 auto

单行文本垂直居中,通过设置行高为父元素高度(父元素高度已知)。

图片垂直居中,设置上下padding(父元素高估不设置)。

图片垂直居中,下边这种方法会有一定偏差(父元素高估不设置)。

图片垂直居中,图片作为背景。

1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

行内元素可可以转换为inline-block实现居中。

如下:

1、line-height属性使文字垂直居中。

2、使用绝对定位和负外边距对块级元素进行垂直居中(已知元素的高度)。

3、使用绝对定位和transform进行垂直居中(未知元素高度)。

4、使用flex布局。

介绍

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。