有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

如何实现盒子水平垂直居中

代码编程 cat 12个月前 (10-20) 46次浏览 已收录 0个评论 扫描二维码

方法一 :

{
position: fixed;

left: 50%; top: 50%;

margin-left: -盒子宽度一半;

margin-top: -盒子高度的一半;
}

方法二:

margin:auto 实现绝对定位元素的居中 弊端:兼容ie8以上浏览器

{
position: fixed;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto
}

备注: 如果盒子在浏览器窗口中水平垂直居中 用固定定位 如果盒子在父元素中水平垂直居中用子绝父相。

行内块水平居中:

text-align: center;

垂直居中:

line-height: 100px; + vertical-align: middle;+父元素font-size: 0;
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址