我如何自动将固定元素居中？ [英] How do I automatically center a fixed element?
本文介绍了我如何自动将固定元素居中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在尝试将我的标题菜单固定在屏幕的顶部，即使在滚动时也是如此。问题是，无论何时我将头寸设置为固定的，它都会失去中心位置，保证金对它没有影响。我希望能够将元素居中，同时仍能够在页面调整大小或以较小的分辨率查看页面时自动居中。
有问题的HTML和CSS：
* {margin：0; padding：0;} h1 {font：bold 20px Tahoma} h2 {font：bold 20px Tahoma} header，section，footer，aside，nav，article {display：block;} html {height：100％;背景：rgb（143,143,143）;} body {width：100％;显示：flex; justify-content：center;}＃big_wrapper {margin：0 0;显示：flex; flex-direction：列; flex：100％;}＃top_header {position：fixed; text-align：center; height：120px;背景：rgb（45,45,45）; / * border-bottom：15px solid rgba（79,79,79,0.4）; * / border-radius：8px;填充：10px; / * box-shadow：rgb（30,30,30）10px 10px 10px; * / font-family：Impact，sans-serif; font-size：40px;颜色：白色;}＃centering_example {color：＃a00d01; font-size：45px; text-shadow：rgba（0,0,0，.5）-3px 3px 0;}＃new_div {display：flex; flex-direction：row;}＃main_section {position：relative; z-index：-1;顶部：140px; max-width：1200px; border-left-left-radius：10px; border-right-right-radius：10px; flex：1;保证金：汽车; margin-top：20px; padding：20px;背景：＃3c3c3c; box-shadow：rgb（30，30，30）10px 10px 10px;}＃the_footer {position：relative;顶部：140px; max-width：1200px;保证金：汽车; text-align：center; padding：20px; border-bottom-left-radius：10px; border-bottom-right-radius：10px; border-top：1px纯黑色;背景：＃3c3c3c; box-shadow：rgb（30，30，30）10px 10px 10px;}＃SELECTED {display：inline-block; margin：6px; margin-left：5px; margin-right：5px;边框：1px纯黑色; border-top：1px solid＃000000; border-top-color：rgba（0，0，0，0.7）;背景：rgba（36,34,31，0.6）; box-shadow：rgba（0,0,0,1）0 0 0 ;; padding：9px 18px; border-radius：8px;颜色：＃f8f8f8; font-size：16px;文字修饰：无; vertical-align：middle;}。media_button {display：inline-block; margin：6px; margin-left：5px; margin-right：5px;边框：1px纯黑色; border-top：1px solid＃000000;背景：rgba（69，69，69，0.8）; padding：3px 8px; border-radius：8px; box-shadow：rgba（0,0,0,1）3px 3px 0;颜色：＃787878; font-size：13px;文字修饰：无; vertical-align：middle;}。media_button：hover {background：rgba（59,59,59，0.6）; box-shadow：rgba（0,0,0,1）2px 2px 0;颜色：＃f8f8f8;}。media_button：active {border-top-color：rgba（0，0，0，0.7）;背景：rgba（36，34，31，0.6）; box-shadow：rgba（0,0,0,1）0 0 0;}。button {display：inline-block; margin：6px; margin-left：5px; margin-right：5px;边框：1px纯黑色; border-top：1px solid＃000000;背景：rgba（69，69，69，0.8）; padding：9px 18px; border-radius：8px; box-shadow：rgba（0,0,0,1）3px 3px 0;颜色：＃787878; font-size：16px;文字修饰：无; vertical-align：middle;}。button：hover {background：rgba（59,59,59，0.6）; box-shadow：rgba（0,0,0,1）2px 2px 0;颜色：＃f8f8f8;}。button：active {border-top-color：rgba（0，0，0，0.7）;背景：rgba（36,34,31，0.6）; box-shadow：rgba（0,0,0,1）0 0 0;}
< div id =big_wrapper> < header id =top_header> < p id =centering_example>居中帮助< / p> < a id =SELECTEDclass =buttonhref =index.html>主页< / a> < a class =button>游戏< / a> < a class =button>关于我们< / a> < a class =button>博客< / a> < /报头> < div id =new_div> < section id =main_section> <物品> < p>这是网站索引页的文字。< / p> <峰; br> < /冠词GT; < /节> < / DIV> < footer id =the_footer> < h6>页脚文字< / h6> < a class =media_buttonhref =https://www.twitter.com> Twitter< / a> < a class =media_buttonhref =https://www.facebook.com> Facebook< / a> < a class =media_buttonhref =http://steamcommunity.com> Steam组< / a> < / footer>< / div>
解决方案尝试给它一个
left：50％; 和一个宽度减去一半的空白。 left：50％;
margin-left：-200px;
已更新小提琴：
http://jsfiddle.net/x3vh99vg/1/
一个更好的方法（在下面的注释中由zgood提出）不使用硬编码的边距，将x轴上的元素转换50％;
变换：平移X（-50％）;
小提琴：
http://jsfiddle.net/x3vh99vg/2/
I'm currently attempting to keep my header menu fixed at the top of the screen, even when scrolling. The issue is that whenever I set the position to fixed, it loses it's centering, and margin has no effect on it. I want to be able to center the element while still enabling it to automatically center itself when the page is resized or viewed by a smaller resolution.
The HTML and CSS in question:
*{
margin: 0;
padding: 0;
}
h1{
font: bold 20px Tahoma
}
h2{
font: bold 20px Tahoma
}
header, section, footer, aside, nav, article {
display: block;
}
html{
height: 100%;
background: rgb(143, 143, 143);
}
body{
width: 100%;
display: flex;
justify-content: center;
}
#big_wrapper{
margin: 0 0;
display: flex;
flex-direction: column;
flex: 100%;
}
#top_header{
position: fixed;
text-align: center;
height: 120px;
background: rgb(45,45,45);
/*border-bottom: 15px solid rgba(79, 79, 79, 0.4);*/
border-radius: 8px;
padding: 10px;
/*box-shadow: rgb(30, 30, 30) 10px 10px 10px;*/
font-family: Impact, sans-serif;
font-size: 40px;
color: white;
}
#centering_example{
color: #a00d01;
font-size: 45px;
text-shadow: rgba(0,0,0,.5) -3px 3px 0;
}
#new_div{
display: flex;
flex-direction: row;
}
#main_section{
position: relative;
z-index: -1;
top: 140px;
max-width: 1200px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
flex: 1;
margin: auto;
margin-top: 20px;
padding: 20px;
background: #3c3c3c;
box-shadow: rgb(30, 30, 30) 10px 10px 10px;
}
#the_footer{
position: relative;
top: 140px;
max-width: 1200px;
margin: auto;
text-align: center;
padding: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 1px solid black;
background: #3c3c3c;
box-shadow: rgb(30, 30, 30) 10px 10px 10px;
}
#SELECTED{
display: inline-block;
margin: 6px;
margin-left: 5px;
margin-right: 5px;
border: 1px solid black;
border-top: 1px solid #000000;
border-top-color: rgba(0, 0, 0, 0.7);
background: rgba(36,34,31, 0.6);
box-shadow: rgba(0,0,0,1) 0 0 0;;
padding: 9px 18px;
border-radius: 8px;
color: #f8f8f8;
font-size: 16px;
text-decoration: none;
vertical-align: middle;
}
.media_button{
display: inline-block;
margin: 6px;
margin-left: 5px;
margin-right: 5px;
border: 1px solid black;
border-top: 1px solid #000000;
background: rgba(69, 69, 69, 0.8);
padding: 3px 8px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 3px 3px 0;
color: #787878;
font-size: 13px;
text-decoration: none;
vertical-align: middle;
}
.media_button:hover{
background: rgba(59,59,59, 0.6);
box-shadow: rgba(0,0,0,1) 2px 2px 0;
color: #f8f8f8;
}
.media_button:active {
border-top-color: rgba(0, 0, 0, 0.7);
background: rgba(36, 34, 31, 0.6);
box-shadow: rgba(0, 0, 0, 1) 0 0 0;
}
.button{
display: inline-block;
margin: 6px;
margin-left: 5px;
margin-right: 5px;
border: 1px solid black;
border-top: 1px solid #000000;
background: rgba(69, 69, 69, 0.8);
padding: 9px 18px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 3px 3px 0;
color: #787878;
font-size: 16px;
text-decoration: none;
vertical-align: middle;
}
.button:hover{
background: rgba(59,59,59, 0.6);
box-shadow: rgba(0,0,0,1) 2px 2px 0;
color: #f8f8f8;
}
.button:active{
border-top-color: rgba(0, 0, 0, 0.7);
background: rgba(36,34,31, 0.6);
box-shadow: rgba(0,0,0,1) 0 0 0;
}
<div id="big_wrapper">
<header id="top_header">
<p id="centering_example">centering help</p>
<a id="SELECTED" class="button" href="index.html">Home</a>
<a class="button">Games</a>
<a class="button">About us</a>
<a class="button">Blog</a>
</header>
<div id="new_div">
<section id="main_section">
<article>
<p>This is text for the index page of the website.</p>
<br>
</article>
</section>
</div>
<footer id="the_footer">
<h6>Footer text</h6>
<a class="media_button" href="https://www.twitter.com">Twitter</a>
<a class="media_button" href="https://www.facebook.com">Facebook</a>
<a class="media_button" href="http://steamcommunity.com">Steam Group</a>
</footer>
</div>
解决方案
Try giving it a left:50%; and a margin-left which is minus half the width.
left: 50%;
margin-left: -200px;
Updated fiddle:
http://jsfiddle.net/x3vh99vg/1/
A better way (suggested by zgood in a comment below), which does not use hardcoded margins is to translate the element on the x-axis by 50%;
transform:translateX(-50%);
Fiddle:
http://jsfiddle.net/x3vh99vg/2/
这篇关于我如何自动将固定元素居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
