- 水平居中:左右两边的间距是一样的
- 垂直居中:上边和下边的间距是一样的
一,最常用简单
- div页面居中,实例如下(盒子居中最优法)
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
- div中的文字水平居中:text-align:center;
(文本居中多用) - div中的文字垂直居中:line-height:值;
div其他文本对齐
文本居中对齐:<div align="center">..</div>
居右对齐:<div align="right">..</div>
居左对齐:<div align="left">..</div>
两端对齐:<div align="justify">..</div>
二,几种定位(position)的居中方法
1,因为relative相对定位的元素在正常的文档流中,所以使用margin-left和margin-right为auto就可以实现水平居中了,不过要记得设置宽度。也可以用 left : 0 ; right : 0 ; margin : auto ;代替。
position: relative;
background-color: green;
width: 50px;
margin:0 auto;<!--上下为0左右auto(自动) -->
2,absolute需要设置更多的属性来实现居中,如:
方法一:使用left、right、margin值为0,实现水平居中,使用top、bottom、margin值为0实现垂直方向上居中,可以分开使用,也可以组合起来使用。同时,也需要设置宽度。
position: absolute;
left: 0; right: 0;top: 0;bottom: 0;
margin: auto;
width:25px;
height:25px;
background:red;
同时,如果把上面代码中的position设置为relative,则只能实现水平居中,而无法垂直方向上居中。
方法二:这种方法也可以实现水平垂直方向上都居中,但要兼容。不需要设置宽度,可以根据内容变化。
position: absolute;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
方法三:可以用left:50%加上margin-left:-(宽度/2),来实现绝对定位的水平居中,注意:这里的宽度指的是设置为绝对定位的元素的宽度。
position: absolute;
background: red;
left:50%;
margin-left:-24%;
width:48%;
三,其他百分比布局中的居中
垂直&水平居中的几种方法 :
-
1.以em/rem设置宽度和高度
父级设置 width:5rem; height:5rem; text-align:center;
子集设置 line-height:5rem; -
2.利用trunsform
父级设置 width:5rem; height:5rem; position:relative
子集设置 position:absolute; top:50%;left50%;transform:translate(-50%,-50%); -
3.高版本浏览器
父级设置 display-flex; justify-content:center; align-items:center; -
4.子集为inline-block则 父级设置 text-align:center
其他
表格内容居中
<tr><td colspan="2" align="center">数学</td></tr>
<!--colspan跨列,即和并两列 -->
col 元素为表格中的三个列规定了不同的对齐方式:
<table width="100%" border="1">
<col align="left" />
<col align="right" />
<!--...-->
</table>
两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式
(注意第一个 colgroup 元素横跨两列):
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<!--...-->
</table>
注意:text-align不可以对行内元素居中