相对最近的除了 position:static 之外的父元素偏移。默认:停留在父元素的 content 区域内!!
但是!!!其实 absolute 的活动区域是父元素的 padding+content,设置 left:0,top:0; 就发现和默认的不一致了!!!(默认不等同于 left:0;top:0;)
所以,当你发现下文中提到的 left:50%; 它是父元素 padding+content 长度的 50%!!切记!!!
相对自己原来的位置偏移。活动范围是父元素的 content 区域,left:50% 也就是父元素的 content 的 50%。
相对可视窗口偏移。活动范围是整个可视窗口,left:50% 一般也就是浏览器可视窗口的 50% 啦。
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
- <body>
- <div class="txtCenter">我想要在父容器中水平居中显示。</div>
- </body>
- <style>
- .txtCenter{
- text-align:center;
- }
- </style>
a. 设置 "左右 margin" 值为 "auto" 来实现居中的。
- <body>
- <div>我是定宽块状元素,哈哈,我要水平居中显示。
- </div>
- </body>
- <style>
- div{
- border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
- width:200px;/*定宽*/
- margin:20px auto;/*margin-left 与 margin-right 设置为 auto */
- }
- </style>
也可以写成:
- margin-left:auto;
- margin-right:auto;
注意:元素的 "上下 margin" 是可以随意设置的。
分析:
1、此方法居中只适用于占满一行的块状元素,不适用于 inline-block 设置 width 是 content 的宽度,加上 padding、border 和 margin 以后的整个块占满一行,因此设置 margin auto 可以使之居中。
2、IE6 下需在父元素上设置 text-align: center;, 再给子元素恢复需要的值。
b. 设置元素为 absolute/relative/fixed,(1)偏移量(left 或者 right)设置为 50%,(2)margin 设置为元素宽度一半乘以 - 1。
- <body>
- <div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
- </body>
- <style>
- body {
- position: relative;
- }
- .content {
- width: 800px;
- position: absolute;
- left: 50%;
- margin-left: -400px;
- }
- </style>
注意此时 absolute 是在父元素的 padding+content 中居中,50% 是父元素 padding+content 的 50%;
relative 是在父元素的 content 中居中,50% 是父元素的 content 的 50%;
fixed 是视图居中,50% 是可视窗口的 50%,所以适用想要在浏览器居中的情况。
c. 设置元素为 absolute/relative/fixed,(1)设置左右偏移量都为 0,(2)设置左右外边距都为 auto。
- <body>
- <div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
- </body>
- <style>
- body {
- position: relative;
- }
- .content {
- width: 800px;
- position: absolute;
- margin: 0 auto;
- left: 0;
- right: 0;
- }
- </style>
居中效果和上一条一致。
注意:如果此时不设置宽度的话,由于左右 margin 都为 0,所以就会把 width 扯大,和整个父元素 padding+content 一样大; 当然如果是 fixed 就会扯得跟视口一样大了。
但是!!!float 浮动元素,margin:auto 是失效的,只能采取第二种 b 方案!!因为 float 不能独占一行,没有 margin 可填充,你扯不开它。但是 absolute 就不同了,通过 left,right:0 可以扯大,充满父元素。
- <div>
- <table>
- <tbody>
- <tr>
- <td>
- <ul>
- <li>
- 我是第一行文本
- </li>
- <li>
- 我是第二行文本
- </li>
- <li>
- 我是第三行文本
- </li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <style>
- table{ border:1px solid; margin:0 auto; }
- </style>
(2)设置 display:inline 或者 inline-block + 父元素 text-align:center
- <body>
- <div class="container">
- <ul>
- <li><a href="#">1</a></li>
- </ul>
- </div>
- </body>
- <style>
- .container{
- text-align:center;
- }
- .container ul{
- list-style:none;
- margin:0;
- padding:0;
- display:inline-block;
- }
- </style>
(3)设置 position:relative 和 left:50%
前文提到的 position 和移动 50% 的方案都是基于定宽的,因为如果不定宽,就会被扯大!!毁掉了我们的布局!
有些同学说我就是不想设定宽度,也不想加 table,也不想把块状元素变成行内元素怎么办?
当当当!!
给自己添加一层父元素,让父元素紧紧的抱(包)住自己(给父元素设置 float 或者 inline-block),使得父元素和自己一样宽,然后给父元素设置 relative 和 left:50%,让父亲带着自己飞,飞多远呢?答:飞父亲的父亲也就是爷爷的 content 的 50%。然后子元素设置 position:relative 和 left: -50% 自己单飞,这个时候飞父亲的 50%,其实也就是自己的 50%,因为自己和父亲一样大。从而来实现水平居中。
- <body>
- <div class="container">
- <ul>
- <li><a href="#">1</a></li>
- </ul>
- </div>
- </body>
- <style>
- .container{
- float:left;
- position:relative;
- left:50%
- }
- .container ul{
- list-style:none;
- margin:0;
- padding:0;
- position:relative;
- left:-50%;
- }
- </style>
来源: http://www.cnblogs.com/cuncunjun/p/6549955.html