css的图片居中
1、首先先在页面里加载一张图片，代码和效果如下图所示：
2、然后设置给图片起一个class名，方便一会儿的操作。
3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。
6、最后给大家附上全部的代码：
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“ /》
《title》使用CSS让图片水平垂直居中《/title》
《/head》
《body》
《img class=“pic“ src=“img/timg.jpg“ alt=““ /》
《/body》
《style type=“text/css“》
.pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
《/style》
《/html》
css垂直水平居中的几种方法
有很多种方法，我给你列举几个实际情况中经常用的
-
对于具有inline属性的元素，可以设置行高与高相同，text-align设置为center即可
-
对于块级元素
①父元素为相对定位，想让绝对定位的元素水平垂直居中，可设置top left两个属性的值为50%，然后通过transform属性的translate(-50%, -50%)来达到水平垂直居中的效果
②对于没有相对于父级定位的元素，可以在设置margin:auto达到水平居中的前提下，给该元素这只相对定位，把top的值设为50%，再利用transform的translateY（-50%）同样也能达到视觉上的水平垂直居中效果
③就是对于想在一列展示块级元素水平垂直居中的方法，最方便的不需要用float设置浮动，这样会脱离文档流，需要通过定位去控制，浮动加定位的属性在一起是不建议的，所以对于这种情况可以将block块级元素的display设置为inline-block，在不损失块级元素的属性情况下，再利用第一种方法去设置垂直水平居中
-
这个就是弹性布局了，父级display设置flex，成为弹性容器，弹性子元素可根据实际需求进行不同效果的水平垂直居中
整体上有很多种方法达到水平垂直居中的效果，无外乎就是通过内外边距，定位，行高加文本居中的方式，前端的目的不是让元素确确实实居中了，而是用最优的方法在视觉效果上居中。
css中居中对齐的属性
常用：文本居中对齐：text-align: center;（文本容器固定宽度）
少用：padding：0px xxpx;（文本容器宽度随着文本字数增加而增加）
注：xxpx的xx为你设置的数值！有不解之处欢迎追问
css怎么设置居中
水平居中
-
若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
-
若是块级元素, 该元素设置 margin:0 auto即可.
-
若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
.parent{
width: -moz-fit-content;
width: -webkit-fit-content;
width:fit-content;
margin:0 auto;} -
使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:
.son{
display: flex;
justify-content: center;} -
使用CSS3中新增的transform属性, 子元素设置如下:
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);} -
使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:
.son{
position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;} -
使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{
position:absolute;
width:固定;
left:0;
right:0;
margin:0 auto;} -
若元素是单行文本, 则可设置 line-height 等于父元素高度
-
若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.
.parent::after, .son{
display:inline-block;
vertical-align:middle;}.parent::after{
content:’’;
height:100%;}元素高度不定
-
可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
-
用 Flex 布局
.parent {
display: flex;
align-items: center;} -
可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
top:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);} -
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
top:50%;
height:固定;
margin-top:-0.5高度;} -
设置父元素相对定位(position:relative), 子元素如下css样式:
.son{
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;}
垂直居中
元素高度固定
css上下居中怎么弄
css样式没有上下居中的属性，文字有可以设置行高，设置行高需要提交知道一行的高度，table布局有上下居中的属性《td valign=“middle“》这是一段文字！《/td》
css如何使背景图片水平居中
方法和详细的操作步骤如下：
1、第一步，打开前端开发工具，然后创建一个新的html代码页，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，创建一个div标签以设置html代码页的背景色，然后将class
=“ bg-img”添加到标签中，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，设置背景图片，创建一个样式标签，然后设置背景图像、该图像不重复以及标签中bg-img的类的宽度和高度，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，保存html代码，然后使用浏览器打开，浏览器上的背景图像将显示在左上角，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，返回html代码页，在bg-img类中添加background-position：center属性，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，保存html代码并刷新浏览器，会发现浏览器上的背景图像已自动水平居中，见下图。这样，就解决了这个问题了。
css 怎么实现 div水平居中 呢
因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。
1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：
2、为div标签添加新的外边距“margin”属性，属性值为“0 auto”，“0”指的是上下外边距为0，“auto”指的是左右外边距为自适应：
3、这时无论浏览器的宽度是多少，div都会在浏览器上水平居中：