您的位置：首页 > Web前端 > CSS

水平居中与垂直居中

2017-05-29 16:20 169 查看

水平居中

1、当为行内元素的时候，可以直接用text-align:center;

2、当为块状元素时，
1)、定宽块状元素（width的值时固定的）
通过margin:auto;实现居中
2)、不定宽块状元素（width的值时不固定的）
a)、用table标签，即可将其看作一个定宽块状元素，用margin属性来实现居中
b)、利用display:inline;，将其设置为行内元素，用text-align属性
c)、position:relative
将父元素设置为float; position:relative; left:50%;

然后子元素设置position:relative;left:-50%;

垂直居中

1、单行文本通过设置父元素的height和line-height属性值相同达到垂直居中效果

弊端：当文字内容长度大于块的宽度时，就会有内容脱离块

2、多行文本时：

1)、插入table标签，其中td标签默认设置了vertical-align:middle属性

2)、设置display:table-cell（设置为表格单元显示），激活vertical-align属性



水平居中的原理：

父层经过float后，再由left:50%后，父层的最左端和html的垂直平分线对齐；子元素的垂直平分线经过left:-50%后，与html的垂直平分线对齐，从而达到水平居中效果


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航