set div center and make it fixed

Question

How to set a div in the center of the screen/parent div, and make it fixed, which will ignore the width changes after it has been placed in the center? I have a div which contain a table, it looks like this: I am not sure whether the outer div is necessary or not. I want my table to be placed in center, and fixed, which it will ignore its width changes. Result below is what I get: As you can see, the table moves left when its size changes to remain the table in center, I want to prevent this, any idea? This is what I have so far:

.main
{
    position: relative;
    width: 600px;
    left: calc(50% - 300px);
    border: 1px solid #000;
}
.table
{
    margin: 0 auto;
}

<div class="main">
  <table class="table">
    <tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
    <tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
  </table>
</div>

Although a screenshot is helpful to show us what the problem is, without your markup and styles our hands are tied. Can you include an MCVE in your question? Also... judging from your description of your problem, using absolute positioning on the error messages will fix the layout issue. And you shouldn't really be using tables for layout, y'know. — Terry, Aug 10 '17 at 06:08
Possible duplicate of [How to center absolutely positioned element in div?](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) — Abhishek Pandey, Aug 10 '17 at 06:11

score 0 · Answer 1 · edited Aug 10 '17 at 06:14

0

Try using this style inside the div, it works for me and you may use help text instead of them inside a table.

<div style="text-align:center">
    <input/><br/><input/><br/><button/>
</div>

edited Aug 10 '17 at 06:14

Carl Binalla

5,393
5
27
46

answered Aug 10 '17 at 06:12

Harish

1
3

score 0 · Answer 2 · answered Aug 10 '17 at 07:57

0

Change you position to fixed

position:fixed;

and re-align other divs that might have been rearranged with top bottom left right

answered Aug 10 '17 at 07:57

Redondo Velasco

103
1
8

score 0 · Answer 3 · answered Aug 10 '17 at 09:07

Why the use of a table for lay-out? Tables should be used for data output or HTML mails (correct me if I'm wrong but that's what I know).

Also you can use this code to vertical and horizontal center a specific element (keep in mind this is absolute but please feel free to play around with this):

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Regarding the fact you want the error messages not to inflict the width of the form. I would advice using position absolute.

I've wrote an example for you see https://jsfiddle.net/bdwte97g/ Hope this helps.

score -1 · Answer 4 · answered Aug 10 '17 at 07:03

-1

Remove margin: 0 auto; from .table and put this lines `.table{ position: relative; left: 45%;

}`

answered Aug 10 '17 at 07:03

Arul MV

1
2

set div center and make it fixed

4 Answers4