How we center the div to entire page

Question

I want to center vertically. I had tried by set padding on top and also set the vertical alignment but in not works on mobile view. Can anybody help?

<div style="padding-top:200px;vertical-align: middle;" align="center"> 
    This is testing content
</div>

`align="center"` is horizontal centering, `valign="middle"` is vertical centering. CSS would be a better choice. — FKEinternet, May 31 '17 at 06:41
I need to vertical align with page not any section and it will also work on mobile view. above link is not satisfied this. — Utkarsh Shah, May 31 '17 at 06:48

score 0 · Accepted Answer · answered May 31 '17 at 06:43

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    flex: 1 0 0;
    margin: 3px;
    position: relative;
}
.box_text {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

<div class="box"><span class="box_text">0</span></div>

score 0 · Answer 2 · answered May 31 '17 at 06:43

0

.content_center {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 250px;
  height: 150px;
  border : 1px solid black;
}

<div class="content_center col-md-6">
  Div Content
</div>

answered May 31 '17 at 06:43

Mohideen bin Mohammed

14,471
7
86
95

How we center the div to entire page

2 Answers2