发表新帖
发表新帖

Positioning
element at center of screen

后端 未结
关注
13 1253
死守一世寂寞
死守一世寂寞 2020-11-28 18:34

I want to position a

(or a ) element at the center of the screen irrespective of screen size. In other words, the space le
相关标签:
13条回答
  • 日久生厌
    2020-11-28 19:12

    I would do this in CSS:

    div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    then in HTML:

    <div class="centered"></div>
    0 讨论(0)
  • 生来不讨喜
    2020-11-28 19:13

    Now, is more easy with HTML 5 and CSS 3:

    <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>
    0 讨论(0)
  • 感动是毒
    2020-11-28 19:14

    Use flex. Much simpler and will work regardless of your div size:

    .center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
     <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

    0 讨论(0)
  • 再見小時候
    2020-11-28 19:19

    Set the width and height and you're good.

    div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

    If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX's answer.

    0 讨论(0)
  • 栀梦
    2020-11-28 19:19

    Alternative solution that doesn't use position absolute:
    I see a lot of position absolute answers. I couldn't use position absolute without breaking something else. So for those that couldn't as well, here is what I did:
    https://stackoverflow.com/a/58622840/6546317 (posted in response to another question).

    The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.

    0 讨论(0)
  • 悲&欢浪女
    2020-11-28 19:21

    If you have a fixed div just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively. Adjust to your needs:

    div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
    0 讨论(0)
 看不清?
提交回复
热议问题