div中的input居中_CSS笔记—居中布局

我们在网页布局的时候，经常会碰到需要居中的情况，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。

一、水平居中

1.元素宽高未知

当元素的宽高都未知的时候，可以利用以下两种方法将元素水平居中：

①CSS3 transform：

.

②flexbox：

.

2.居中元素为内联元素

常见的内联元素有：span, a, img, input, label 等等。

您可以在块级父元素内水平居中内联元素，只需css中加以下核心语法：

.

这种方法适用于display 为 inline, inline-block, inline-table, inline-flex 类型的元素。

3.居中元素为块级元素

常见的块元素：div, h1~h6, table, p, ul, li 等等。

①设置 margin：0 auto

.

此方法只能进行水平的居中，对浮动元素或绝对定位元素是无效的。

②转换为 inline-block 属性：

.

4.居中元素为浮动元素

加以下核心语法:

.

5.居中元素为绝对定位元素

①

.

②

.

二、垂直居中

1.元素宽高未知

当元素的宽高都未知的时候，也可以利用以下同样两种方法将元素垂直居中：

①CSS3 transform：

.

②flexbox：

.

适用于子元素为浮动、绝对定位、内联元素，均可垂直居中。

其中flexbox 是 CSS3 新增的属性，设计初衷就是为了解决像垂直居中这样的常见布局问题，相信未来flexbox布局会越来越多应用。

2. 元素宽高已知

①

.

②

.

3.居中元素为单行文本

①

.

将文本的 line-height 属性值设为和文字父容器一样的高度，但适用于只有一行文字的情况。

②

.

有时内联/文本元素可以垂直居中显示，只是因为它们上部和下部都有相等的padding。

4.居中元素为多行文本

①table：

.

②flexbox:

.

三、水平垂直居中

1.元素宽高已知

①负边距居中：

.

此方法灵活性差，不能自适应，且宽高不支持百分比尺寸和 min-/max- 属性。

②绝对居中：

div 

元素的宽高支持百分比 % 属性值和 min-/max- 属性。

③transform :

.

④table-cell:

.

这种方法适用于子元素 display 为 inline, inline-block, inline-table, inline-flex 类型的元素，前提需要知道父元素的宽高，且父元素的宽高不能设为百分比数。

⑤font-size 结合 vertical-align：

.

该方法前提条件是需给父元素设一个合适的 font-size 值，该值一般为其父元素的高度除以 1.14 得到的值，并且子元素必须是一个 display 为 inline, inline-block, inline-table, inline-flex 类型的元素，此外还需在子元素内加上 vertical-align: middle 属性。

⑥文本内容：

text 

2.元素宽高未知

①transform :

.

transform方法中元素既可以加宽高，也可不加，用于水平垂直居中布局。

②flexbox :

.

③grid:

body

该方法适用于只有一个元素的时候，作为非常新的布局方式，其兼容性也比较差。

• 上面只是把所有方法的代码要点罗列了一下，能满足所有的居中布局方案，如你还有其他好方法，欢迎交流指正。