How to center an html component?

Question

we would like to center an html component.

The situation now:

.card{
    width: 400px;
    border: 3px solid #54722b; 
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 20px;
}
.card-header{
    background-color: rgb(221, 211, 123); 
}
.card-header h3{
     color: white;   
}

<div class="card">
    <div class="card-header">
        <h3>Title</h3>
    </div>

    <div class="card-body">
        <div class="form-group">
            <form (ngSubmit)="register()">
                <div class="input-group form-group">
                    <input  name="name1" class="form-control">  
                </div>
                <div class="input-group form-group">
                    <input name="name2" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name3" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name4" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input name="name5" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name6" class="form-control">
                </div>
            </form>
        </div>
    </div>
</div>

We tried: (but it didn't work)

To add to the .card in the css file, the line:

position: fixed;

This line of code centered the component, but when we zoomed in, it was not possible to scroll the screen and see the entire component.

How to center the html component, so that after zooming in, it will be possible to scroll the screen?

It's possible that it's centered within its container but the container isn't the full width of the viewport. — ray, Apr 01 '21 at 16:58
Does this answer your question? [How to center a fixed element?](https://stackoverflow.com/questions/15037826/how-to-center-a-fixed-element) — Masood, Apr 01 '21 at 17:10

score 0 · Answer 1 · answered Apr 01 '21 at 16:57

You can try these codes.

See to big screen: https://codepen.io/en0ndev/pen/bGgqpPm

body {
  height:5000px;
}

.card_main {
  position:fixed;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
}

.card{
    width: 400px;
    border: 3px solid #54722b; 
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 20px;
}
.card-header{
    background-color: rgb(221, 211, 123); 
}
.card-header h3{
     color: white;   
}

<body>

<div class="card_main">

<div class="card">
    <div class="card-header">
        <h3>Title</h3>
    </div>

    <div class="card-body">
        <div class="form-group">
            <form (ngSubmit)="register()">
                <div class="input-group form-group">
                    <input  name="name1" class="form-control">  
                </div>
                <div class="input-group form-group">
                    <input name="name2" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name3" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name4" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input name="name5" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name6" class="form-control">
                </div>
            </form>
        </div>
    </div>
</div>
  
</div>
  
</body>

Thanks for your reply! I tried it, but when I zoom in, I can't scroll the screen. Other idea? @en0ndev — Mana, Apr 01 '21 at 17:09

score 0 · Answer 2 · answered Apr 01 '21 at 16:59

.card{
    width: 400px;
    border: 3px solid #54722b; 
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.card-header{
    background-color: rgb(221, 211, 123); 
}
.card-header h3{
     color: white;   
}

<div class="card">
    <div class="card-header">
        <h3>Title</h3>
    </div>

    <div class="card-body">
        <div class="form-group">
            <form (ngSubmit)="register()">
                <div class="input-group form-group">
                    <input  name="name1" class="form-control">  
                </div>
                <div class="input-group form-group">
                    <input name="name2" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name3" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name4" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input name="name5" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name6" class="form-control">
                </div>
            </form>
        </div>
    </div>
</div>

Is this what you are trying to achieve?

score 0 · Answer 3 · answered Apr 01 '21 at 16:59

body {
  display:grid;
  justify-content:center; 
}

.card{
    width: 400px;
    border: 3px solid #54722b; 
    margin-top: 20px;
}
.card-header{
    background-color: rgb(221, 211, 123); 
}
.card-header h3{
     color: white;   
}

<div class="card">
    <div class="card-header">
        <h3>Title</h3>
    </div>

    <div class="card-body">
        <div class="form-group">
            <form (ngSubmit)="register()">
                <div class="input-group form-group">
                    <input  name="name1" class="form-control">  
                </div>
                <div class="input-group form-group">
                    <input name="name2" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name3" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name4" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input name="name5" class="form-control">
                </div>
                <div class="input-group form-group">
                    <input  name="name6" class="form-control">
                </div>
            </form>
        </div>
    </div>
</div>

Vikrant Naik · Answer 4 · 2021-04-01T17:21:14.540

0

Use FlexBox styling:

display: flex property. Once the container is flex container you can align the content centrally using

align-content: center // along the cross axis, other possible values flex-start, flex-end

justify-content: center //along the main axis

.card {
  display: flex;
  align-items: center;
  justify-content: center;
}

edited Apr 01 '21 at 17:21

answered Apr 01 '21 at 17:02

Vikrant Naik

1
3

score 0 · Answer 5 · answered Apr 01 '21 at 17:06

0

The issue might be on the parent container of .card. You have a margin of auto, which should center the div inside the parent div. Check the margins with inspector to see which container is causing the issue.

answered Apr 01 '21 at 17:06

mat335

48
8

score -5 · Answer 6 · answered Apr 01 '21 at 16:55

-5

Add margin:0 auto to css for .card Or use center tags

answered Apr 01 '21 at 16:55

Hakan Turkmen

119
1
6

How to center an html component?

6 Answers6