讨论CSS中的各种居中方法

今天主要讲讲CSS中的各种对中方法。首先是水平居中，最简单的方法当然是

复制代码如下：margin:0 auto

也就是将左边距和右边距属性设置为自动，从而达到水平居中的效果。

其他方法呢？让我一起来吧：

行高

首先，介绍了文本的水平居中方法：

复制的代码如下：div class='wrap '刘芳/div

使用设置为高度的相同行高：

复制代码如下：包装{行高： 200 px/*垂直居中键*/text-align : center；

高度： 200 px；font-size : 36px；背景色： # CCC；}

效果如下：

填充填料

使用填充和背景剪辑来实现div的水平和垂直居中；

复制的代码如下： div class=' parent ' div class=' children '/div/div

将背景剪辑设置为内容框，将背景剪切到内容区域的外边缘，然后使用填充将外部div和内部div之间的差异设置为一半。母公司{ margin:0 auto宽度width:200px高度：200 px；背景色：红色；}.儿童{ width: 100px高度： 100像素；padding: 50px背景-颜色：黑色；背景剪辑：内容框；/*居中的关键*/

效果如下：

边距填充

其次，引入边距填充方法，实现水平和垂直居中。首先，我们还是定义父子div:

div class=' parent ' div class=' children '/div/div

这里，我们将子div的上边距设置为父div的高度减去子div高度的一半，然后将溢出设置为隐藏，以触发父div的BFC。LESS代码如下：

@ parentWidth:200px@ childrenWidth:50px。母公司{ margin:0 autoheight: @ parentWidthwidth: @ parentWidth背景：红色；飞越：隐藏；/*触发bfc */}。儿童{高度： @儿童宽度；width: @ childrenWidth左边距left:auto右边距： auto；margin-top :(@ parent width-@ children width)/2；背景：黑色；}最后定心效果如下：

绝对定位

使用position:absolute(顶部，左侧50%)，然后将边距设置为负值，使div水平和垂直居中。首先，需要定义一个父子div:

复制的代码如下： div class=' parent ' div class=' children '/div/div

然后设置相应的css:父{ position:relativemargin:0 auto宽度width:200px高度：200 px；背景色：红色；}.children { position : absolute；左侧：50%；top :50%；margin :-25px 0 0-25px；高度：50 px；宽度：50 px；背景-颜色：黑色；}边距中的值是div宽度的一半，最终呈现：

文本居中对齐

众所周知，文本对齐可以将内容层次集中在一个div中。但是如果你想把子视图放在div的中心呢？您可以将子div的显示设置为内嵌块。父{ text-align : center；margin:0 auto宽度width:200px高度：200 px；背景：红色；}.子级{ positiona绝对的；margin-top :75 px；宽度：50 px；高度：50 px；背景：黑色；display : inline-block；/*使其父元素文本对齐生效*/}

图像居中

一般图片居中和文本对齐是一样的，图片被包裹在一个div中，div的文本对齐设置为居中。你可以参考以下链接：个人网站

有一种特殊的方式，用一张图片占用空间，让父容器得到高度和宽度，这样偏移-50%的图片就可以有一个计算百分比的参考容器。优点是不知道图片的大小，可以放一张大小不超过父容器的图片居中。另外兼容性好，IE6兼容流畅。代码如下：

复制的代码如下： div class=' parent ' p img class=' hidden-img ' src=' http :http://nec.netease.com/img/s/1.jpg' alt=' '/img class=' show-img ' src=' http :

变换居中

在上面提到的以div为中心的例子中，div的宽度是固定的，但是在实际项目中，可能会遇到宽度可变的div，尤其是在响应式或移动设计中，这种情况更为常见。因此，下面介绍一种不固定宽度的div水平和垂直对中方法。代码优先：

复制的代码如下： div class=' parent ' div class=' children ' div class=' children-inline '我是水平和垂直居中的！/div /div/div。父项{左侧浮动：宽度： 100%；高度： 200 px；背景-颜色：红色；}.儿童{ float:left位置：相对；top :50%；左侧：50%；}.children-inline { position : relative；左侧：-50%；-web kit-transform : translate 3d(0，-50%，0)；transform : translate3d(0，-50%，0)；背景-颜色：黑色；颜色：白色；}

效果如下：

首先，我们使用float缩小需要居中的div的父div，即子div的宽度，然后left:50%将子div的左侧与水平中心线对齐。此时，它并没有真正居中，所以我们需要将儿童内部向左移动-50%，使其水平居中。先说垂直方向。首先，将孩子的顶部设置为50%，然后将顶部与垂直中心线对齐。同样，我们需要把孩子们内心的感动提高50%。但这50%无法计算，所以我们使用了Transform : Translate3D (0，-50%，0)；这种方法很容易使用。

弯曲居中

最后介绍了CSS3中display:flex实现的水平和垂直对中方法。

复制的代码如下： div class=' parent ' div class=' children '我被flex水平和垂直居中！/div/div

html，正文{ width : 100%；高度： 200 px；}.父级{ display:flexalign-items:居中；/*垂直居中*/两端对齐-内容：居中；/*水平居中*/宽度：100%；高度：100%；背景色：红色；}.儿童{背景色： blue；}

效果如下：

这个方法是最简单的，但是兼容性不好，但是随着时间的推移，各大浏览器都会兼容。

以上就是本文的全部内容，希望大家能喜欢。