css图片居中_关于水平居中

今天初十，在家闲着没事干，干脆写篇文章解解闷好了

我们有时候会遇到需要设置水平居中的场景，那么今天来谈讨论下如何进行水平居中。

首先我们要分情况讨论：它是行内元素呢还是块状元素，块状元素里面又分为定宽块状元素和不定宽块状元素。

我们先来看行内元素的水平居中。

当被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

我们看这段代码：

<

效果图：

我们发现行内元素（图片）在div11中实现了居中。

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时候分两种情况：定宽块状元素和不定宽块状元素。我们先来看一看定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

当满足定宽和块状两个条件时，元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们把第一个例子中的定宽块状元素div11来居中一下。在上段代码中的css中加入margin:0 auto;

代码：

<

效果图：

没写完，嘻嘻嘻嘻，想睡觉，嘻嘻嘻嘻，明天写，嘻嘻嘻嘻