css 水平居中绝对定位

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 水平居中绝对定位相关的知识,希望对你有一定的参考价值。

/*If you want to align center on left attribute.
The same thing is for top alignment, you could use margin-top: (width/2 of your div), the concept is the same of left attribute.
It's important to set header element to position:relative.
try this: */

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}
/* http://jsfiddle.net/DeTJH/2/

If you would like to not use calculations you can do this: */

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
/* http://jsfiddle.net/DeTJH/149/ */

以上是关于css 水平居中绝对定位的主要内容,如果未能解决你的问题,请参考以下文章

绝对定位后怎样水平居中

绝对定位元素水平居中和垂直居中的原理

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术(转)

CSS布局--垂直水平居中

css3总结之居中

css 居中