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

CSS元素居中方法总结

2020-04-22 04:16 471 查看

一、文本居中

左右居中:

[code]text-align:center;

上下居中:

[code]line-height:(height数值);

二、块元素居中

方法一:

[code]margin:auto;

让盒子左右居中。

方法二:

[code]position:absolute;
left:50%;
margin-left:-(宽的一半);
top:50%;
margin-top:-(高的一半);

让盒子上下左右居中。

缺点:不够智能,若盒子的宽高改变,则需要改变相应的margin值。

方法三:

[code]position;absolute;
left:50%;
tranform:translateX(-50%);
top:50%;
tranform:translateY(-50%);

利用位移让盒子居中,位移50%是基于盒子自身的宽高。

跟方法二相比,这种方法更为智能。

方法四:

[code]父元素{
display:flex;}
子元素{
margin:auto;}

在flex布局中,margin:auto;会让元素的上下左右都生效。

注意:应用flex布局,会影响到父元素内部所有子元素的布局。

方法五:

[code]margin:auto;
position:absolute:
left:0;
right:0;
top:0;
bottom:0;

 

  • 点赞
  • 收藏
  • 分享
  • 文章举报
绝望的东北大米 发布了8 篇原创文章 · 获赞 0 · 访问量 248 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: