Best way to center a
on a page vertically and horizontally? [duplicate]

前端未结

关注

 30  2903

借酒劲吻你

相关标签:

30条回答

伪装坚强ぢ

2020-11-21 05:26
```
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}
```
```
<body>
    <div>Div to be aligned vertically</div>
</body>
```
position: absolute div in body document

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport (body tag), like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

source: CSS position
0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2020-11-21 05:32
There is actually a solution, using css3, which can vertically center a div of unknown height. The trick is to move the div down by 50%, then use transformY to get it back up to the middle. The only prerequisite is that the to-be-centered element has a parent. Example:
```
<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
```
Supported by all major browsers, and IE 9 and up (don't bother about IE 8, as it died together with win xp this autumn. Thank god.)

JS Fiddle Demo
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-11-21 05:32
This solution worked for me
```
    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }
```
(or height : 70% / bottom : 15%

height : 40% / bottom :30% ...)
0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2020-11-21 05:35
Solution

Using only two lines of CSS, utilizing the magical power of Flexbox
```
.parent { display: flex; }
.child { margin: auto }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2020-11-21 05:35
Sorry for late reply best way is
```
  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }
```
margin-top and margin-left should be according to your div box size
0 讨论(0)
发布评论:

提交评论
- 加载中...
臣服心动

2020-11-21 05:36
I think there are two ways to make a div center align through CSS.
```
.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}
```
This is the simple and best way. for the demo please visit below link:

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题

Best way to center a on a page vertically and horizontally? [duplicate]

Best way to center a
on a page vertically and horizontally? [duplicate]