Align center with position:fixed

HTML & CSS
1

I have a webpage at http://form.kr/dest/over.php.

For putting the pink box be centered, I try to add “text-align:center” in #over at http://form.kr/dest/over01.php

And I add "margin:auto to “over01” at http://form.kr/dest/over02.php.

“over02” seems not to work I expected.

How can I make the pink box to be centered?

2

Like this, perhaps…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>over</title> 

<style media="screen">
#over {
    position: fixed;
    top: 0; 
    left: 50%;
    transform: translate( -50%, 0  ); 
    padding: 0.5em 1em;
    background: #ffc0cb;
}

#under {
    padding: 1.5em 1em;
    background: #ff0;
 }
</style> 

</head> 
<body>

 <div id="over">center</div>
 <div id="under"></div>
 
</body> 
</html>

coothead

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.