我有一个关于一种弹出框项目的HTML代码。
<div id="lightbox">
<img id="image" src="" />
</div>
使用以下CSS：
#lightbox{
display:none;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}
#image{
position:relative;
height:600px;
border:1px solid grey;
}
position: absolute 在 Chrome 中使文本 不模糊。 - ivan.a.bovin或者，您可以尝试这个方法（仅适用于您已知道图像的高度）：
#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}
这里有几个我正在使用的SASS mixins...希望能对某些人有所帮助：
// vertically centers as relative
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// vertically centers the element as absolute
@mixin vertical-center {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// horizontally centers the element as absolute
@mixin horizontal-center {
position: absolute;
left: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// absolutely centers the element inside of its first non-static parent
@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
top: 50% ，还需要使用 translateY(-50%)？ - dman使用CSS3的视口单位和calc()函数相结合来居中轻箱，避免因硬件加速导致文字模糊的风险。该解决方案也支持响应式设计。将公式margin-top = -height / 2从固定单位转换为视口单位。
/* Overlay */
body::after
{
position: fixed;
z-index: 19000;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: ' ';
opacity: .2;
background-color: #000;
}
/* Lightbox */
.lightbox
{
position: fixed;
z-index: 15;
top: 50%;
width: 90vw;
height: 90vh;
margin: 0 5vw;
margin-top: calc(-90vh / 2 );
}
有关相对长度单位和calc()的更多信息：
详细示例
body {
margin: 0;
}
/* The Overlay */
body::after {
position: fixed;
z-index: 14;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content:' ';
opacity: .5;
background-color: #000;
}
/* The Lightbox */
.lightbox{
position: fixed;
z-index: 15;
top: 50%;
width: 60vw;
height: 60vh;
margin: 0 20vw;
margin-top: calc(-60vh / 2);
background:#fff;
border: 1px solid white;
border-radius: 5px;
overflow:hidden;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
}
/* Bonus: responsive and centered image */
.lightbox h1 {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
position: relative;
padding-left: 1em;
font-family: sans-serif;
color: #E2E8F2;
}
.highlight
{
color: #4E2622;
}
.lightbox img {
max-width: 120%;
height: auto;
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="lightbox">
<img src="https://pbs.twimg.com/media/CMSrIg_XAAAQU3a.jpg:large">
<h1><span class="highlight">Sono</span> Neko その猫</h1>
</div>
<h1>Leave dead animals as gifts</h1>
<h3>Meowwww missing until dinner time</h3>
<p>Cat ipsum dolor sit amet, vommit food and eat it again. Find something else more interesting favor packaging over toy yet hide at bottom of staircase to trip human or intently stare at the same spot, but poop in litter box, scratch the walls attack feet ears back wide eyed. Scratch leg; meow for can opener to feed me. Where is my slave? i'm getting hungry purr for no reason or eat a plant, kill a hand eat a plant, kill a hand. Where is my slave? i'm getting hungry jump around on couch, meow constantly until given food, , so chase dog then run away yet stick butt in face, for poop on grasses for rub face on owner, under the bed. Brown cats with pink ears meow destroy the blinds why must they do that, and see owner, run in terror. Meowing non stop for food play time, yet stand in front of the computer screen get video posted to internet for chasing red dot poop in litter box, scratch the walls. Destroy couch leave dead animals as gifts why must they do that, for find something else more interesting hopped up on catnip sleep in the bathroom sink. Kitty power! pooping rainbow while flying in a toasted bread costume in space eat grass, throw it back up and spread kitty litter all over house. I like big cats and i can not lie. Under the bed brown cats with pink ears loves cheeseburgers has closed eyes but still sees you yet chase red laser dot. Claw drapes drink water out of the faucet and behind the couch refuse to leave cardboard box but hunt anything that moves. Rub face on owner favor packaging over toy yet play time. Hide when guests come over love to play with owner's hair tie. Purr for no reason make meme, make cute face eat a plant, kill a hand all of a sudden cat goes crazy, or stare at the wall, play with food and get confused by dust for hate dog love to play with owner's hair tie. Sleep on keyboard eat grass, throw it back up but hopped up on catnip make meme, make cute face. Pooping rainbow while flying in a toasted bread costume in space. Chase imaginary bugs destroy the blinds claws in your leg for hack up furballs. I am the best chase laser but i am the best yet meow all night having their mate disturbing sleeping humans and hunt by meowing loudly at 5am next to human slave food dispenser. Destroy the blinds. Eat a plant, kill a hand run in circles, and chew iPad power cord, and rub face on everything, and sit in box mark territory, so ignore the squirrels, you'll never catch them anyway. Present belly, scratch hand when stroked nap all day, and spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce destroy couch, but put toy mouse in food bowl run out of litter box at full speed .</p>#img {
position: relative; /* or absolute or fixed depending on your needs */
top: 50%;
height: 80vh;
margin-top: -40vh; /* minus half the height */
}
对我有用的解决方法是使用添加一个空的超级父元素，从那里开始 -> 每个子元素或子子元素都将垂直和水平居中。
如果您只需要水平/垂直居中，请按照代码注释中所写删除不必要的属性。
CSS：
.page-area{
position: fixed;
z-index: 5;/*not must but usually fixed elements require to be top*/
height: 100%;
width: 100%;
display: flex;
justify-content: center;/*define the horizontally centering*/
align-items: center;/*define the vertically centering*/
}
HTML：
<div class = "page-area">
<div>My centered element/s</div>
</div>