How to align body for showing elements in center?

Question

i have a single page. it's made with html5 and css3. in this page i have one div. i want to align this div . vertical align and horizontal align . for horizontal align i use [ margin 0 auto ] but i don't know how i can vertical align this div.

i use the [ vertical-align: middle ] but didn't work.

i want to align body for showing this div in center vertical & horizontal.

my main question is : How to align body for showing elements in center?

*note : my page is full width and full height. like this

/*this is a body code*/

    body {
        width: 100%;
        background: url(images/1.png);
        direction: rtl;
        text-align: center;
        background-attachment: fixed;
        background-repeat: round;
    }

    /*this is a div code*/

    .indexcard {
        width: 90%;
        height: 500px;
        margin: 0 auto;
    }

    /*this is a my cssreset code maybe you need this*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }

Can you add the HTML you are using as well please? It's difficult to understand the issue without seeing the problem you are experience — Martin, Sep 10 '19 at 08:11

score -1 · Answer 1 · edited Sep 10 '19 at 08:44

-1

Hi I think that you can use this help:

.center {height: 200px;  position: relative;  border: 3px solid green;}
.center p {  margin: 0;  position: absolute;  top: 50%;  left: 50%;  
transform:translate(-50%, -50%);}

edited Sep 10 '19 at 08:44

Nikaido

4,443
5
30
47

answered Sep 10 '19 at 08:16

Giovanni Cirillo

1
1

score -1 · Answer 2 · answered Sep 10 '19 at 08:24

-1

try this instead of vertical-align

.center {
  margin: auto;
  width: 20%;
  border: 3px solid #73AD21;
  padding: 10px;
}

answered Sep 10 '19 at 08:24

Remy Baas

1
3

score -1 · Answer 3 · answered Sep 10 '19 at 08:37

-1

Flexbox is your friend in this case, here's a detailed answer by Hashem from:

How to center align vertically the container in bootstrap

answered Sep 10 '19 at 08:37

Eytan

140
8

How to align body for showing elements in center?

3 Answers3