当你将一个元素定位到固定时,它就会离开文档流,甚至是margin:auto;如果你愿意,它将不起作用,将一个元素嵌套在固定的定位元素内,而不是使用margin:auto;为了那个原因.
Demo 2(增加了身体元素的高度,以便您可以滚动测试)
HTML
CSS
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
}
.center {
width: 300px;
margin: auto;
height: 40px;
background: blue;
}
有些人会建议你使用display:inline-block;对于父元素设置为text-align:center;的子元素,如果满足您的需要,那么您也可以这样做…
.fixed {
position: fixed;
width: 100%;
height: 40px;
background: tomato;
text-align: center;
}
.center {
display: inline-block;
width: 300px;
height: 40px;
background: blue;
}
只需确保使用text-align:left;对于子元素,否则它将继承父元素的text-align.