第一种方法：
设置父元素内文字居中即可让居中。
element{text-align:center;}
第二种方法：
设置为块级元素，设置左右margin为auto即可让居中。
img{display:block;margin-left:auto;margin-right:auto;}
通常，Word里面直接输入文字，只能是左右居中，不能上下居中（插入回车符除外）确实需要上下居中也行：
1、插入一个“1行1列”的表格——拉到页面四周边缘——输入文字——右键——单元格对齐方式——居中（9个样式的中间一个就是）；
2、点表格——右键——表格属性——边框和底纹——边框：“无”；底纹：“无”——确定。
插入居中很容易：
1、插入后——点右键——设置格式——版式——紧密型（做四周型）——确定；
2、再直接“拉”到页面中间就行。
（也可以插入到上面简单表格里面处）选中当前你要选中的的图层，图层这个面板被你关掉的话去窗口菜单重新打开。
然后选中这个图层，也就是你的，不包括背景，背景要是没有就是一个个像素格，否则都是有背景，这样的话居中需要其他 *** 作。这里不讨论，下面说这种情况，选中这个图层后，Ctrl+a选中整个画布，此时你会看到画布四周都是蚂蚁线。
这个时候实际你就选中了两个单位1画布2当前图层。随后鼠标切换到选择工具你会看到菜单栏左右有几个将这两个对象对齐的几个图标，随后水平居中，垂直居中都可以。
好了，如果你的这个图层自带背景如何居中主体呢，那就要把背景去掉，然后再进行相对于全画布的对齐 *** 作，如何去背景呢，这个我一般是抠图。 *** 作繁琐，不多赘述，随后对齐，也是一样。
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/timgjpg" alt="" />
</body>
<style type="text/css">
pic{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）