关于居中的一些方法
1.水平居中:
(1)当子元素为行内元素时,给父元素设置 text-align:center
即可。
(2)当子元素为块级元素时,子元素设置为:
posiition:absolute;
left:50%;
margin-left:宽度的负一半;
说明:left:50%是指子元素的左边距离父元素的左边为父元素的一半,而margin-left:宽度的负一半是指父元素的左边框穿过子元素的竖直平分线,二者结合子元素即处于父元素的水平居中位置
(3)利用 tranform 的 translate 方法,设置如下:
position:absolute;
left:50%;
tranform:tranlate(-50%,0);
说明:tranform的tranlate方法是将div向x,y轴平移(以自身元素),参见上一条
(4)利用margin属性,子元素代码如下
position:absolute;
width:xx;
left:x;
right:x;
margin:0 auto;
说明:当 margin 只有两个参数时,第一个表上下,第二个表左右,此时 left 和 right 的参数一定要相同,
(5)利用 flex 布局,父元素代码如下:
display:flex;
justify-content:center;center;
详细参见flex布局
2.竖直居中:
(1)若子元素为单行文本元素,设置其 line-height 为父元素高度即可。
(2)margin属性,子元素代码如下:
position:absolute;
height:xx;
top:x;
bottom:x;
margin: auto 0;
参见水平第四条
(3)利用tranform方法,
position:absolute;
top:50%;
tranform:tranlate(0,-50%);
参见水平第三条
(4)利用 flex 布局,父元素设置如下:
display:flex;
align-items:center;
**参见flex布局
(5)利用vertical-align,先将父元素设置display:table
将子元素设置display:table-cell;vertical:middle;
注意这样会将子元素沾满父元素,
最简单的同时实现水平竖直居中的方法(子元素为块级元素):子元素绝对定位后,将left 和 right 设为相同,将top和bottom设为相同,margin取值为auto即可。