css居中方法非常多，根据工作的实际情况采用恰当方法，可取到事半功倍的效果。

就常见的一些居中方法整理如下：

代码如下：


　　　　

前端开发



如果.con1在知道宽和高的情况下要使其居中，可以采用如下方法：

单纯的垂直居中：margin：0 auto；(前提是对.con1设置了固定宽度且宽度小于父元素宽度)；

既垂直居中也水平居中：.con{position:relative;}

.con1{
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
}
使.con1里面的图片居中的方法：.con1{
height：300px;
line-heigth:300px;
}
.con1 img{vertical-align:middle}
使.con1里面的文字居中的方法：只使用.con1{
height：300px;
line-heigth:300px;
}就够了；
万能的居中方法：
方法一：
.con{position:relative;}
.con1{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
方法二：
.con{position:relative;}
.con1{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}
Flexbox布局下的水平垂直居中方法：
.con{
justify-content:center;
align-items:center;
display:-webkit-flex;
}


CSS 居中方法集锦

记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

CSS居中方法搜集

转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...

css居中方法与双飞翼布局

居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...

css居中方法小结

水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...

css居中方法详解

水平居中: 通过设置父元素,让子元素内容居中:text-align:center; 通过设置子元素本身,让子元素居中:margin:0 auto; 以上方法生效的前提条件是子元素没有被float元素影 ...

css 居中方法

垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...

CSS中各种各样居中方法的总结

在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

CSS居中的方法整合--水平居中

原文 CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷.是水平居中还是垂直居中?是block还是inline? 居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定. 这里就从这些方 ...